Path in Android — cos'è, metodi di costruzione e come disegnare

Cos'è Path in Android?

Path è una classe del pacchetto android.graphics che rappresenta una sequenza di segmenti di percorso: linee rette, curve di Bézier quadratiche e cubiche. Ogni segmento viene aggiunto chiamando uno dei metodi moveTo/lineTo/quadTo/cubicTo.

Path lavora a stretto contatto con Canvas e Paint. Canvas.drawPath(path, paint) prende un Path pronto e lo disegna con le impostazioni correnti del pennello. Questo è il modo principale per disegnare forme arbitrarie oltre rettangoli e cerchi.

Ogni Path consiste in una sequenza di punti e tipi di segmento. I punti sono definiti nel sistema di coordinate di Canvas, dove l'asse X va a destra e l'asse Y verso il basso. Per impostazione predefinita, l'origine è l'angolo superiore sinistro della View, ma può essere spostata tramite Canvas.translate.

Costruzione di linee: moveTo e lineTo

Il metodo moveTo sposta la penna nel punto specificato senza tracciare una linea. Imposta la posizione iniziale per il segmento successivo. Senza moveTo, Path inizia nel punto (0,0).

lineTo — Linea retta

lineTo aggiunge un segmento rettilineo dalla posizione corrente della penna al punto specificato. Dopo aver chiamato lineTo, la posizione corrente si sposta al punto finale del segmento.

rLineTo e rMoveTo sono versioni relative dei metodi. Accettano offset dx e dy dalla posizione corrente invece di coordinate assolute.

val path = Path().apply {
    moveTo(100f, 100f)     // punto di partenza A
    lineTo(300f, 100f)     // A -> B
    lineTo(200f, 250f)     // B -> C
    close()                    // C -> A (chiudi)
}

Curve di Bézier: quadTo e cubicTo

quadTo aggiunge una curva di Bézier quadratica con un punto di controllo. Una curva quadratica è definita da tre punti: inizio (posizione corrente), controllo e fine.

cubicTo — Curva di Bézier cubica

cubicTo aggiunge una curva di Bézier cubica con due punti di controllo, offrendo maggiore flessibilità nella formazione di contorni complessi.

Per comodità, esistono versioni relative rQuadTo e rCubicTo che accettano offset dalla posizione corrente.

Forme pronte: Cerchi, Rettangoli e Archi

addCircle aggiunge un cerchio al Path come nuovo contorno. Parametri: coordinate del centro, raggio e direzione (CW — orario, CCW — antiorario).

addRect e addOval

addRect aggiunge un rettangolo definito dalle coordinate degli angoli superiore sinistro e inferiore destro. addOval aggiunge un ovale inscritto nel rettangolo dato. addRoundRect aggiunge un rettangolo con angoli arrotondati.

arcTo aggiunge un arco di cerchio o ellisse. Parametri: rettangolo di delimitazione, angolo iniziale in gradi, angolo dell'arco e il flag forceMoveTo.

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

Operazioni booleane con contorni (Path Op)

Path.Op è un meccanismo per operazioni booleane su due contorni, disponibile dall'API 19. Operazioni supportate: UNION, INTERSECT, DIFFERENCE e XOR.

Applicazione di Path Op nel design

UNION combina due contorni in uno. INTERSECT mantiene solo l'area appartenente a entrambi i contorni. DIFFERENCE sottrae il secondo contorno dal primo. XOR mantiene le aree appartenenti a uno solo dei contorni.

Il metodo op prende due Path e un'operazione, restituendo true se il risultato non è vuoto. La complessità computazionale è O(n*m), dove n e m sono il numero di segmenti in ciascun Path.

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) // cerchio con foro quadrato

Esempio di costruzione di una forma complessa

Creiamo un'icona a cuore personalizzata usando Path. La forma è costruita da due archi e due segmenti rettilinei usando cubicTo.

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

Le curve cubiche cubicTo consentono un controllo preciso sulla forma di ciascuna metà del cuore. La prima curva forma la metà sinistra, la seconda — la metà destra. I segmenti rettilinei in basso collegano le curve al vertice del cuore.

Per testare la forma, puoi abilitare temporaneamente il rendering con Paint.Style.STROKE — questo mostrerà tutti i punti di controllo e i segmenti del Path.