Path in Android — was es ist, Aufbaumethoden und wie man zeichnet

Was ist Path in Android?

Path ist eine Klasse aus dem Paket android.graphics, die eine Sequenz von Pfadsegmenten darstellt: gerade Linien, quadratische und kubische Bezier-Kurven. Jedes Segment wird durch Aufruf einer der Methoden moveTo/lineTo/quadTo/cubicTo hinzugefügt.

Path arbeitet eng mit Canvas und Paint zusammen. Canvas.drawPath(path, paint) nimmt einen fertigen Path und zeichnet ihn mit den aktuellen Pinsel-Einstellungen. Dies ist die primäre Methode zum Zeichnen beliebiger Formen über Rechtecke und Kreise hinaus.

Jeder Path besteht aus einer Sequenz von Punkten und Segmenttypen. Die Punkte werden im Canvas-Koordinatensystem definiert, wobei die X-Achse nach rechts und die Y-Achse nach unten zeigt. Standardmäßig ist der Ursprung die obere linke Ecke der View, kann aber über Canvas.translate verschoben werden.

Linienaufbau: moveTo und lineTo

Die moveTo-Methode bewegt den Stift zum angegebenen Punkt, ohne eine Linie zu zeichnen. Sie setzt die Startposition für das nächste Segment. Ohne moveTo beginnt Path am Punkt (0,0).

lineTo — Gerade Linie

lineTo fügt ein gerades Segment von der aktuellen Stiftposition zum angegebenen Punkt hinzu. Nach dem Aufruf von lineTo bewegt sich die aktuelle Position zum Endpunkt des Segments.

rLineTo und rMoveTo sind relative Versionen der Methoden. Sie akzeptieren dx- und dy-Offsets von der aktuellen Position anstelle absoluter Koordinaten.

val path = Path().apply {
    moveTo(100f, 100f)     // Startpunkt A
    lineTo(300f, 100f)     // A -> B
    lineTo(200f, 250f)     // B -> C
    close()                    // C -> A (schließen)
}

Bezier-Kurven: quadTo und cubicTo

quadTo fügt eine quadratische Bezier-Kurve mit einem Kontrollpunkt hinzu. Eine quadratische Kurve wird durch drei Punkte definiert: Start (aktuelle Position), Kontrollpunkt und Ende.

cubicTo — Kubische Bezier-Kurve

cubicTo fügt eine kubische Bezier-Kurve mit zwei Kontrollpunkten hinzu, was mehr Flexibilität bei der Bildung komplexer Konturen bietet.

Der Einfachheit halber gibt es relative Versionen rQuadTo und rCubicTo, die Offsets von der aktuellen Position akzeptieren.

Vorgefertigte Formen: Kreise, Rechtecke und Bögen

addCircle fügt einen Kreis als neuen Kontur zum Path hinzu. Parameter: Mittelpunktskoordinaten, Radius und Richtung (CW — im Uhrzeigersinn, CCW — gegen den Uhrzeigersinn).

addRect und addOval

addRect fügt ein Rechteck hinzu, das durch die Koordinaten der oberen linken und unteren rechten Ecke definiert ist. addOval fügt ein Oval ein, das in das angegebene Rechteck eingeschrieben ist. addRoundRect fügt ein Rechteck mit abgerundeten Ecken hinzu.

arcTo fügt einen Bogen eines Kreises oder einer Ellipse hinzu. Parameter: Begrenzungsrechteck, Startwinkel in Grad, Bogenwinkel und das forceMoveTo-Flag.

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

Boolesche Operationen mit Konturen (Path Op)

Path.Op ist ein Mechanismus für boolesche Operationen auf zwei Konturen, verfügbar seit API 19. Unterstützte Operationen: UNION, INTERSECT, DIFFERENCE und XOR.

Anwendung von Path Op im Design

UNION kombiniert zwei Konturen zu einer. INTERSECT behält nur den Bereich, der zu beiden Konturen gehört. DIFFERENCE subtrahiert die zweite Kontur von der ersten. XOR behält Bereiche, die nur zu einer der Konturen gehören.

Die op-Methode nimmt zwei Paths und eine Operation entgegen und gibt true zurück, wenn das Ergebnis nicht leer ist. Die Rechenkomplexität beträgt O(n*m), wobei n und m die Anzahl der Segmente in jedem Path sind.

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) // Kreis mit quadratischem Loch

Beispiel für den Aufbau einer komplexen Form

Erstellen wir ein benutzerdefiniertes Herzsymbol mit Path. Die Form wird aus zwei Bögen und zwei geraden Segmenten mit cubicTo aufgebaut.

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

Kubische Kurven cubicTo ermöglichen eine präzise Kontrolle über die Form jeder Herzhälfte. Die erste Kurve bildet die linke Hälfte, die zweite die rechte Hälfte. Die geraden Segmente unten verbinden die Kurven mit der Spitze des Herzens.

Zum Testen der Form können Sie vorübergehend das Rendering mit Paint.Style.STROKE aktivieren — dies zeigt alle Kontrollpunkte und Path-Segmente an.