Path στο Android — τι είναι, μέθοδοι κατασκευής και πώς να σχεδιάσετε

Τι είναι το Path στο Android;

Path — μια κλάση από το πακέτο android.graphics που αντιπροσωπεύει μια ακολουθία τμημάτων διαδρομής: ευθείες γραμμές, τετραγωνικές και κυβικές καμπύλες Bézier, τόξα κύκλων και ελλείψεων. Σε αντίθεση με τις ψηφιδωτές εικόνες, το Path αποθηκεύει μόνο τη μαθηματική περιγραφή του περιγράμματος, επιτρέποντας την κλιμάκωση χωρίς απώλεια ποιότητας. Το μέγεθος του αντικειμένου Path στη μνήμη είναι ανάλογο με τον αριθμό των τμημάτων, όχι με την ανάλυση οθόνης.

Το Path λειτουργεί σε στενή σύνδεση με το Canvas και το Paint. Το Canvas.drawPath(path, paint) λαμβάνει το έτοιμο περίγραμμα και το εμφανίζει σύμφωνα με τα στυλ του Paint. Αυτός ο διαχωρισμός επιτρέπει την εφάπαξ κατασκευή ενός σύνθετου περιγράμματος και την επαναλαμβανόμενη σχεδίασή του με διαφορετικά στυλ — χρώμα, πάχος γραμμής ή διαβάθμιση. Σύμφωνα με το Google I/O 2023, η επαναχρησιμοποίηση του Path μειώνει τον χρόνο σχεδίασης των προσαρμοσμένων View κατά 25–40%.

Κάθε Path αποτελείται από μια ακολουθία σημείων και τύπων τμημάτων. Τα σημεία ορίζονται στο σύστημα συντεταγμένων του Canvas, όπου ο άξονας X κατευθύνεται προς τα δεξιά και ο άξονας Y — προς τα κάτω. Το σημείο εκκίνησης του περιγράμματος ορίζεται με τη μέθοδο moveTo, μετά την οποία κάθε επόμενο τμήμα προστίθεται σε σχέση με το προηγούμενο σημείο. Όλες οι λειτουργίες κατασκευής εκτελούνται στην CPU και δεν απαιτούν GPU μέχρι τη στιγμή της σχεδίασης.

Κατασκευή γραμμών: moveTo και lineTo

Η μέθοδος moveTo μετακινεί την πένα στο καθορισμένο σημείο χωρίς να σχεδιάζει γραμμή. Ορίζει την αρχική θέση για το επόμενο τμήμα. Χωρίς moveTo, το σημείο εκκίνησης του Path είναι προεπιλεγμένα στο (0, 0). Για κάθε νέο συνεχές περίγραμμα απαιτείται ξεχωριστό moveTo — αυτή είναι η τυπική προσέγγιση για τη σχεδίαση πολλών ανεξάρτητων γραμμών σε ένα Path.

lineTo — ευθεία γραμμή

lineTo προσθέτει ένα ευθύ τμήμα από την τρέχουσα θέση της πένας στο καθορισμένο σημείο. Μετά την κλήση του lineTo, η τρέχουσα θέση μετακινείται στο τελικό σημείο του τμήματος. Μια ακολουθία κλήσεων lineTo δημιουργεί μια τεθλασμένη γραμμή — πολυγραμμή. Για το κλείσιμο του περιγράμματος χρησιμοποιείται η μέθοδος close, η οποία σχεδιάζει μια ευθεία γραμμή από το τελευταίο σημείο στο σημείο εκκίνησης του τελευταίου moveTo.

rLineTo και rMoveTo — σχετικές εκδόσεις των μεθόδων. Δέχονται μετατοπίσεις dx και dy από την τρέχουσα θέση, όχι απόλυτες συντεταγμένες. rLineTo είναι βολικό για την κατασκευή σχημάτων με επαναλαμβανόμενα βήματα, όπως πλέγματα και δίκτυα. Οι σχετικές μέθοδοι δεν απαιτούν επανυπολογισμό των απόλυτων συντεταγμένων κατά τη μετακίνηση ολόκληρου του περιγράμματος.

val path = Path().apply {
    moveTo(100f, 100f)     // σημείο εκκίνησης A
    lineTo(300f, 100f)     // A → B
    lineTo(200f, 250f)     // B → C
    close()                    // C → A (κλείσιμο)
}

Καμπύλες Bézier: quadTo και cubicTo

quadTo προσθέτει μια τετραγωνική καμπύλη Bézier με ένα σημείο ελέγχου. Η τετραγωνική καμπύλη ορίζεται από τρία σημεία: έναρξης (τρέχουσα θέση), ελέγχου (καθορίζει την καμπυλότητα) και τέλους. Το σημείο ελέγχου δεν βρίσκεται στην καμπύλη, αλλά καθορίζει την κατεύθυνση των εφαπτομένων στα σημεία έναρξης και τέλους. Αυτός ο τύπος καμπύλης χρησιμοποιείται για απλές στρογγυλοποιήσεις και ομαλές μεταβάσεις.

cubicTo — κυβική καμπύλη Bézier

cubicTo προσθέτει μια κυβική καμπύλη Bézier με δύο σημεία ελέγχου, προσφέροντας μεγαλύτερη ευελιξία στη διαμόρφωση των καμπυλών. Τέσσερα σημεία ορίζουν την καμπύλη: έναρξης, δύο ελέγχου και τέλους. Οι κυβικές καμπύλες χρησιμοποιούνται για την κατασκευή σύνθετων περιγραμμάτων, όπως περιγράμματα γραμμάτων σε γραμματοσειρές, γραφήματα συναρτήσεων και οργανικά σχήματα.

Για ευκολία, υπάρχουν οι σχετικές εκδόσεις rQuadTo και rCubicTo, που δέχονται μετατοπίσεις από την τρέχουσα θέση. Αυτό είναι ιδιαίτερα χρήσιμο στην προγραμματική δημιουργία καμπυλών βάσει σχετικών αυξήσεων, όπως στη σχεδίαση κυμάτων ή ημιτονικών καμπυλών. Η ακρίβεια των καμπυλών Bézier εξαρτάται μόνο από την ακρίβεια των υπολογισμών στην CPU — κατά τη σχεδίαση, ψηφιοποιούνται με υποεικονομική ανάλυση.

Έτοιμα σχήματα: κύκλοι, ορθογώνια και τόξα

addCircle προσθέτει έναν κύκλο στο Path ως νέο περίγραμμα. Παράμετροι: συντεταγμένες κέντρου, ακτίνα και κατεύθυνση περιστροφής (CW — δεξιόστροφα, CCW — αριστερόστροφα). Μετά την κλήση, η τρέχουσα θέση της πένας δεν αλλάζει — ο κύκλος προστίθεται ως ανεξάρτητο κλειστό περίγραμμα, που δεν σχετίζεται με προηγούμενα τμήματα. Αυτό επιτρέπει τον συνδυασμό έτοιμων σχημάτων με αυθαίρετες γραμμές σε ένα Path.

addRect και addOval

addRect προσθέτει ένα ορθογώνιο που ορίζεται από τις συντεταγμένες της πάνω αριστερής και κάτω δεξιάς γωνίας. addOval προσθέτει μια έλλειψη εγγεγραμμένη στο καθορισμένο ορθογώνιο. Και οι δύο μέθοδοι υποστηρίζουν την παράμετρο Direction. Για στρογγυλεμένες γωνίες χρησιμοποιείται το addRoundRect, το οποίο δέχεται ακτίνες στρογγυλοποίησης για όλες τις γωνίες ή έναν πίνακα 8 τιμών ακτίνας (δύο ανά γωνία).

arcTo προσθέτει ένα τόξο κύκλου ή έλλειψης. Παράμετροι: οριοθετητικό ορθογώνιο, γωνία έναρξης σε μοίρες, γωνία ανοίγματος και η σημαία forceMoveTo. Εάν το forceMoveTo είναι true, πριν από το τόξο εκτελείται moveTo στο σημείο έναρξης του τόξου, διαφορετικά το τόξο συνδέεται με την τρέχουσα θέση με ευθεία γραμμή. Τα τόξα χρησιμοποιούνται ενεργά σε κυκλικά διαγράμματα και δείκτες προόδου.

val path = Path().apply {
    addCircle(200f, 200f, 100f, Path.Direction.CW)
    addRect(50f, 50f, 150f, 150f, Path.Direction.CCW)
    addRoundRect(RectF(300f, 100f, 400f, 200f), 15f, 15f, Path.Direction.CW)
}

Boolean πράξεις σε περιγράμματα (Path Op)

Path.Op — ο μηχανισμός Boolean πράξεων σε δύο περιγράμματα, διαθέσιμος από το API 19. Υποστηρίζονται οι πράξεις DIFFERENCE, INTERSECT, UNION, XOR και REVERSE_DIFFERENCE. Το αποτέλεσμα είναι ένα νέο Path που περιέχει τη γεωμετρία που προκύπτει μετά την εφαρμογή της επιλεγμένης πράξης. Αυτό επιτρέπει τη δημιουργία σύνθετων σχημάτων από απλά βασικά σχήματα χωρίς χειροκίνητο υπολογισμό σημείων τομής.

Εφαρμογή του Path Op στο σχεδιασμό

UNION ενώνει δύο περιγράμματα σε ένα. INTERSECT αφήνει μόνο την περιοχή που ανήκει και στα δύο περιγράμματα. DIFFERENCE αφαιρεί το δεύτερο περίγραμμα από το πρώτο — βολικό για την κοπή τρυπών σε σχήματα. XOR αφήνει περιοχές που ανήκουν μόνο σε ένα από τα περιγράμματα. REVERSE_DIFFERENCE αφαιρεί το πρώτο περίγραμμα από το δεύτερο.

Η μέθοδος op δέχεται δύο Path και την πράξη, επιστρέφοντας true εάν το αποτέλεσμα δεν είναι κενό. Η υπολογιστική πολυπλοκότητα της πράξης εξαρτάται από τον αριθμό τμημάτων και στα δύο περιγράμματα. Για απλά σχήματα (λιγότερα από 100 τμήματα), η πράξη εκτελείται σε υποχιλιοστά του δευτερολέπτου. Το Path Op χρησιμοποιείται ενεργά σε επεξεργαστές εικόνων, εργαλεία σχεδιασμού και στην κατασκευή σύνθετων στοιχείων UI.

val circle = Path().apply { addCircle(0f, 0f, 100f, Path.Direction.CW) }
val square = Path().apply { addRect(RectF(-50f, -50f, 50f, 50f), Path.Direction.CW) }
val result = Path()
result.op(circle, square, Path.Op.DIFFERENCE) // κύκλος με τετράγωνη τρύπα

Παράδειγμα κατασκευής σύνθετου σχήματος

Ας εξετάσουμε τη δημιουργία ενός προσαρμοσμένου εικονιδίου καρδιάς με το Path. Το σχήμα κατασκευάζεται από δύο τόξα και δύο ευθείες γραμμές, σχηματίζοντας μια συμμετρική σιλουέτα. Ο κώδικας δείχνει τον συνδυασμό moveTo, cubicTo και close για την επίτευξη ομαλού περιγράμματος.

class HeartShape {

    fun createHeartPath(width: Float, height: Float): Path {
        val path = Path()
        val hw = width / 2f
        val hh = height / 2f

        path.moveTo(hw, hh + hh * 0.3f)
        path.cubicTo(hw, hh + hh * 0.6f, hw + hw * 0.5f, hh + hh * 0.5f, hw + hw * 0.5f, hh)
        path.cubicTo(hw + hw * 0.5f, hh * 0.5f, hw + hw * 0.2f, 0f, hw, hh * 0.2f)
        path.cubicTo(hw - hw * 0.2f, 0f, hw - hw * 0.5f, hh * 0.5f, hw - hw * 0.5f, hh)
        path.cubicTo(hw - hw * 0.5f, hh + hh * 0.5f, hw, hh + hh * 0.6f, hw, hh + hh * 0.3f)
        path.close()
        return path
    }
}

Κυβικές καμπύλες cubicTo επιτρέπουν τον ακριβή έλεγχο του σχήματος κάθε μισού της καρδιάς. Η πρώτη καμπύλη σχηματίζει το πάνω δεξιό τόξο, η δεύτερη — το αριστερό, η τρίτη και η τέταρτη — το κάτω μέρος. Η μέθοδος close κλείνει το περίγραμμα στο κάτω σημείο. Αυτή η προσέγγιση χρησιμοποιείται για τη δημιουργία προσαρμοσμένων εικονιδίων, λογότυπων και διακοσμητικών στοιχείων σε εφαρμογές.

Για τη δοκιμή του σχήματος, μπορείτε προσωρινά να ενεργοποιήσετε τη σχεδίαση με Paint.Style.STROKE — αυτό θα δείξει όλες τις βοηθητικές γραμμές και καμπύλες. Εάν το περίγραμμα φαίνεται ανώμαλο, αυξήστε τον αριθμό σημείων στις καμπύλες ή χρησιμοποιήστε το PathMeasure για την αξιολόγηση του μήκους και της ομαλότητας των τμημάτων. Το PathMeasure παρέχει ακριβείς μετρήσεις διαδρομής, απαραίτητες για την κίνηση κινούμενης εικόνας κατά μήκος του περιγράμματος.