Path în Android — ce este, metode de construire și cum să desenezi

Ce este Path în Android?

Path — o clasă din pachetul android.graphics care reprezintă o secvență de segmente de cale: linii drepte, curbe Bézier pătratice și cubice, arcuri de cerc și elipsă. Spre deosebire de imaginile raster, Path stochează doar descrierea matematică a conturului, ceea ce permite scalarea fără pierdere de calitate. Dimensiunea obiectului Path în memorie este proporțională cu numărul de segmente, nu cu rezoluția ecranului.

Path lucrează în strânsă legătură cu Canvas și Paint. Canvas.drawPath(path, paint) primește conturul gata făcut și îl afișează conform stilurilor Paint. Această separare permite construirea o singură dată a unui contur complex și desenarea lui repetată cu stiluri diferite — culoare, grosimea liniei sau gradient. Potrivit Google I/O 2023, reutilizarea Path reduce timpul de desenare a View-urilor personalizate cu 25–40%.

Fiecare Path constă dintr-o secvență de puncte și tipuri de segmente. Punctele sunt definite în sistemul de coordonate Canvas, unde axa X este orientată spre dreapta, iar axa Y — în jos. Punctul de pornire al conturului este stabilit prin metoda moveTo, după care fiecare segment următor este adăugat relativ la punctul anterior. Toate operațiile de construire sunt executate pe CPU și nu necesită GPU până la momentul desenării.

Construirea liniilor: moveTo și lineTo

Metoda moveTo mută stiloul în punctul specificat fără a desena o linie. Ea stabilește poziția de pornire pentru următorul segment. Fără moveTo, punctul de pornire al Path este implicit la (0, 0). Pentru fiecare contur continuu nou este necesar un moveTo separat — aceasta este abordarea standard pentru desenarea mai multor linii independente într-un singur Path.

lineTo — linie dreaptă

lineTo adaugă un segment drept de la poziția curentă a stiloului până la punctul specificat. După apelul lineTo, poziția curentă se mută la punctul final al segmentului. O succesiune de apeluri lineTo creează o linie frântă — polilinie. Pentru închiderea conturului se folosește metoda close, care trasează o linie dreaptă de la ultimul punct la punctul de pornire al ultimului moveTo.

rLineTo și rMoveTo — versiuni relative ale metodelor. Ele acceptă deplasări dx și dy de la poziția curentă, nu coordonate absolute. rLineTo este convenabil pentru construirea figurilor cu pași repetitivi, de exemplu grile și rețele. Metodele relative nu necesită recalcularea coordonatelor absolute la deplasarea întregului contur.

val path = Path().apply {
    moveTo(100f, 100f)     // punctul de start A
    lineTo(300f, 100f)     // A → B
    lineTo(200f, 250f)     // B → C
    close()                    // C → A (închidere)
}

Curbe Bézier: quadTo și cubicTo

quadTo adaugă o curbă Bézier pătratică cu un punct de control. Curba pătratică este definită de trei puncte: de pornire (poziția curentă), de control (determină curbura) și final. Punctul de control nu se află pe curbă, dar stabilește direcția tangentelor în punctele de pornire și final. Acest tip de curbă este utilizat pentru rotunjiri simple și tranziții line.

cubicTo — curba Bézier cubică

cubicTo adaugă o curbă Bézier cubică cu două puncte de control, ceea ce oferă mai multă flexibilitate în formarea curburilor. Patru puncte definesc curba: de pornire, două de control și final. Curbele cubice sunt utilizate pentru construirea contururilor complexe, cum ar fi contururile literelor în fonturi, graficele funcțiilor și formele organice.

Pentru comoditate, există versiunile relative rQuadTo și rCubicTo, care acceptă deplasări de la poziția curentă. Acest lucru este util în special la generarea programatică a curbelor pe baza incrementărilor relative, de exemplu la desenarea undelor sau sinusoidelor. Precizia curbelor Bézier depinde doar de precizia calculelor pe CPU — la desenare, ele sunt rasterizate cu rezoluție subpixel.

Forme gata făcute: cercuri, dreptunghiuri și arcuri

addCircle adaugă un cerc în Path ca un nou contur. Parametri: coordonatele centrului, raza și direcția de parcurs (CW — în sensul acelor de ceas, CCW — invers). După apel, poziția curentă a stiloului nu se modifică — cercul este adăugat ca un contur închis independent, neasociat cu segmentele anterioare. Acest lucru permite combinarea formelor gata făcute cu linii arbitrare într-un singur Path.

addRect și addOval

addRect adaugă un dreptunghi definit de coordonatele colțurilor stânga-sus și dreapta-jos. addOval adaugă o elipsă înscrisă în dreptunghiul specificat. Ambele metode suportă parametrul Direction. Pentru colțuri rotunjite se folosește addRoundRect, care acceptă razele de rotunjire pentru toate colțurile sau un tablou de 8 valori ale razelor (câte două pe colț).

arcTo adaugă un arc de cerc sau elipsă. Parametri: dreptunghiul delimitator, unghiul de pornire în grade, unghiul de deschidere și flag-ul forceMoveTo. Dacă forceMoveTo este true, înaintea arcului se execută un moveTo la punctul de pornire al arcului, în caz contrar arcul se conectează cu poziția curentă printr-o linie dreaptă. Arcurile sunt utilizate activ în diagrame circulare și indicatoare de progres.

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)
}

Operații booleene pe contururi (Path Op)

Path.Op — mecanismul operațiilor booleene pe două contururi, disponibil începând cu API 19. Sunt suportate operațiile DIFFERENCE, INTERSECT, UNION, XOR și REVERSE_DIFFERENCE. Rezultatul este un nou Path care conține geometria obținută după aplicarea operației selectate. Acest lucru permite crearea formelor complexe din figuri de bază simple fără calcularea manuală a punctelor de intersecție.

Aplicarea Path Op în design

UNION unește două contururi într-unul singur. INTERSECT lasă doar zona aparținând ambelor contururi. DIFFERENCE scade al doilea contur din primul — convenabil pentru tăierea „găurilor” în figuri. XOR lasă zonele aparținând doar unuia dintre contururi. REVERSE_DIFFERENCE scade primul contur din al doilea.

Metoda op primește două Path-uri și operația, returnând true dacă rezultatul nu este gol. Complexitatea computațională a operației depinde de numărul de segmente din ambele contururi. Pentru figuri simple (mai puțin de 100 de segmente), operația se execută în submilisecunde. Path Op este utilizat activ în editoarele de imagini, instrumentele de design și la construirea elementelor UI complexe.

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) // cerc cu gaură pătrată

Exemplu de construire a unei figuri complexe

Să examinăm crearea unei pictograme personalizate „inimă” cu ajutorul Path. Figura este construită din două arcuri și două linii drepte, formând un siluet simetric. Codul demonstrează combinația de moveTo, cubicTo și close pentru obținerea unui contur lin.

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
    }
}

Curbele cubice cubicTo permit controlul precis al formei fiecărei jumătăți a inimii. Prima curbă formează arcul din dreapta sus, a doua — stânga, a treia și a patra — partea inferioară. Metoda close închide conturul în punctul de jos. Această abordare este utilizată pentru crearea pictogramelor personalizate, logo-urilor și elementelor decorative în aplicații.

Pentru testarea formei, se poate activa temporar desenarea cu Paint.Style.STROKE — aceasta va arăta toate liniile de ghidare și curbele. Dacă conturul pare neuniform, măriți numărul de puncte în curbe sau utilizați PathMeasure pentru evaluarea lungimii și uniformității segmentelor. PathMeasure furnizează metrici exacte ale căii, necesare pentru animația mișcării de-a lungul conturului.