Path in Android — wat is het, bouwmethoden en hoe te tekenen

Wat is Path in Android?

Path — een klasse uit het android.graphics-pakket die een reeks padsegmenten vertegenwoordigt: rechte lijnen, kwadratische en kubische Bézier-curven, cirkel- en ellipsbogen. In tegenstelling tot rasterafbeeldingen slaat Path alleen de wiskundige beschrijving van de contour op, waardoor het kan worden geschaald zonder kwaliteitsverlies. De grootte van een Path-object in het geheugen is evenredig met het aantal segmenten, niet met de schermresolutie.

Path werkt nauw samen met Canvas en Paint. Canvas.drawPath(path, paint) neemt de voltooide contour en geeft deze weer volgens de stijlen van Paint. Deze scheiding maakt het mogelijk om een complexe contour eenmaal te bouwen en herhaaldelijk te tekenen met verschillende stijlen — kleur, lijndikte of verloop. Volgens Google I/O 2023 vermindert hergebruik van Path de tekentijd van aangepaste Views met 25–40%.

Elk Path bestaat uit een reeks punten en segmenttypen. Punten worden gedefinieerd in het Canvas-coördinatensysteem, waar de X-as naar rechts en de Y-as naar beneden is gericht. Het startpunt van de contour wordt ingesteld met de methode moveTo, waarna elk volgend segment wordt toegevoegd ten opzichte van het vorige punt. Alle constructiebewerkingen worden op de CPU uitgevoerd en hebben pas GPU nodig op het moment van tekenen.

Lijnen bouwen: moveTo en lineTo

De methode moveTo verplaatst de pen naar het opgegeven punt zonder een lijn te tekenen. Het stelt de startpositie in voor het volgende segment. Zonder moveTo bevindt het startpunt van Path zich standaard op (0, 0). Voor elke nieuwe doorlopende contour is een aparte moveTo vereist — dit is de standaardaanpak voor het tekenen van meerdere onafhankelijke lijnen in één Path.

lineTo — rechte lijn

lineTo voegt een recht segment toe van de huidige penpositie naar het opgegeven punt. Na het aanroepen van lineTo verplaatst de huidige positie zich naar het eindpunt van het segment. Een reeks lineTo-aanroepen creëert een gebroken lijn — polylijn. Om de contour te sluiten wordt de methode close gebruikt, die een rechte lijn trekt van het laatste punt naar het startpunt van de laatste moveTo.

rLineTo en rMoveTo — relatieve versies van de methoden. Ze accepteren verschuivingen dx en dy vanaf de huidige positie, geen absolute coördinaten. rLineTo is handig voor het bouwen van figuren met herhalende stappen, zoals roosters en grids. Relatieve methoden vereisen geen herberekening van absolute coördinaten bij het verplaatsen van de hele contour.

val path = Path().apply {
    moveTo(100f, 100f)     // startpunt A
    lineTo(300f, 100f)     // A → B
    lineTo(200f, 250f)     // B → C
    close()                    // C → A (sluiten)
}

Bézier-curven: quadTo en cubicTo

quadTo voegt een kwadratische Bézier-curve toe met één controlepunt. De kwadratische curve wordt bepaald door drie punten: start (huidige positie), controle (bepaalt de buiging) en eind. Het controlepunt ligt niet op de curve, maar bepaalt de richting van de raaklijnen in het start- en eindpunt. Dit type curve wordt gebruikt voor eenvoudige afrondingen en vloeiende overgangen.

cubicTo — kubische Bézier-curve

cubicTo voegt een kubische Bézier-curve toe met twee controlepuntten, wat meer flexibiliteit geeft bij het vormen van buigingen. Vier punten bepalen de curve: start, twee controlepunten en eind. Kubische curven worden gebruikt voor het bouwen van complexe contouren, zoals lettercontouren in lettertypen, functiegrafieken en organische vormen.

Voor het gemak zijn er relatieve versies rQuadTo en rCubicTo, die verschuivingen vanaf de huidige positie accepteren. Dit is vooral handig bij het programmatisch genereren van curven op basis van relatieve incrementen, zoals bij het tekenen van golven of sinusoïden. De precisie van Bézier-curven hangt alleen af van de nauwkeurigheid van berekeningen op de CPU — tijdens het tekenen worden ze gerasterd met subpixelresolutie.

Kant-en-klare vormen: cirkels, rechthoeken en bogen

addCircle voegt een cirkel toe aan Path als een nieuwe contour. Parameters: coördinaten van het middelpunt, straal en doorlooprichting (CW — met de klok mee, CCW — tegen de klok in). Na de aanroep verandert de huidige penpositie niet — de cirkel wordt toegevoegd als een onafhankelijke gesloten contour, niet gerelateerd aan eerdere segmenten. Dit maakt het mogelijk om kant-en-klare vormen te combineren met willekeurige lijnen in één Path.

addRect en addOval

addRect voegt een rechthoek toe gedefinieerd door de coördinaten van de linker bovenhoek en rechter onderhoek. addOval voegt een ellips toe die is ingeschreven in de opgegeven rechthoek. Beide methoden ondersteunen de parameter Direction. Voor afgeronde hoeken wordt addRoundRect gebruikt, die afrondingsstralen voor alle hoeken accepteert of een array van 8 straalwaarden (twee per hoek).

arcTo voegt een cirkel- of ellipsboog toe. Parameters: begrenzende rechthoek, starthoek in graden, openingshoek en de forceMoveTo-vlag. Als forceMoveTo true is, wordt vóór de boog een moveTo naar het startpunt van de boog uitgevoerd, anders wordt de boog met een rechte lijn verbonden met de huidige positie. Bogen worden actief gebruikt in cirkeldiagrammen en voortgangsindicatoren.

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

Booleaanse bewerkingen op contouren (Path Op)

Path.Op — het mechanisme voor Booleaanse bewerkingen op twee contouren, beschikbaar vanaf API 19. De bewerkingen DIFFERENCE, INTERSECT, UNION, XOR en REVERSE_DIFFERENCE worden ondersteund. Het resultaat is een nieuwe Path die de geometrie bevat na het toepassen van de geselecteerde bewerking. Dit maakt het mogelijk om complexe vormen te creëren uit eenvoudige basisfiguren zonder handmatige berekening van snijpunten.

Toepassing van Path Op in ontwerp

UNION verenigt twee contouren in één. INTERSECT laat alleen het gebied over dat tot beide contouren behoort. DIFFERENCE trekt de tweede contour van de eerste af — handig voor het uitsnijden van gaten in vormen. XOR laat gebieden over die tot slechts één van de contouren behoren. REVERSE_DIFFERENCE trekt de eerste contour van de tweede af.

De methode op accepteert twee Paths en de bewerking en retourneert true als het resultaat niet leeg is. De computationele complexiteit van de bewerking hangt af van het aantal segmenten in beide contouren. Voor eenvoudige figuren (minder dan 100 segmenten) wordt de bewerking uitgevoerd in submilliseconden. Path Op wordt actief gebruikt in afbeeldingseditors, ontwerptools en bij het bouwen van complexe UI-elementen.

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) // cirkel met vierkant gat

Voorbeeld van het bouwen van een complexe figuur

Laten we het maken van een aangepast hartpictogram met Path bekijken. De figuur wordt gebouwd uit twee bogen en twee rechte lijnen die een symmetrisch silhouet vormen. De code demonstreert de combinatie van moveTo, cubicTo en close voor het verkrijgen van een vloeiende contour.

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 curven cubicTo maken het mogelijk om de vorm van elke helft van het hart nauwkeurig te controleren. De eerste curve vormt de rechter bovenboog, de tweede — de linker, de derde en vierde — het onderste deel. De methode close sluit de contour op het laagste punt. Deze aanpak wordt gebruikt voor het maken van aangepaste pictogrammen, logo's en decoratieve elementen in applicaties.

Om de vorm te testen kan tijdelijk tekenen met Paint.Style.STROKE worden ingeschakeld — dit toont alle hulplijnen en curven. Als de contour er ongelijk uitziet, verhoog dan het aantal punten in de curven of gebruik PathMeasure om de lengte en gelijkmatigheid van segmenten te beoordelen. PathMeasure levert nauwkeurige padmetrieken die nodig zijn voor animatie van beweging langs de contour.