Path i Android — vad är det, konstruktionsmetoder och hur man ritar

Vad är Path i Android?

Path — en klass från paketet android.graphics som representerar en sekvens av vägsegment: raka linjer, kvadratiska och kubiska Bézier-kurvor, cirkel- och ellipsbågar. Till skillnad från rasterbilder lagrar Path endast den matematiska beskrivningen av konturen, vilket möjliggör skalning utan kvalitetsförlust. Storleken på Path-objektet i minnet är proportionell mot antalet segment, inte mot skärmupplösningen.

Path arbetar i nära samverkan med Canvas och Paint. Canvas.drawPath(path, paint) tar emot den färdiga konturen och visar den enligt Paint-stilarna. Denna separation gör det möjligt att bygga en komplex kontur en gång och rita den upprepade gånger med olika stilar — färg, linjetjocklek eller gradient. Enligt Google I/O 2023 minskar återanvändning av Path ritningstiden för anpassade Vyer med 25–40%.

Varje Path består av en sekvens punkter och segmenttyper. Punkterna definieras i Canvas koordinatsystem, där X-axeln är riktad åt höger och Y-axeln nedåt. Konturens startpunkt ställs in med metoden moveTo, varefter varje efterföljande segment läggs till i förhållande till föregående punkt. Alla konstruktionsoperationer utförs på CPU och kräver inte GPU förrän vid ritningstillfället.

Bygga linjer: moveTo och lineTo

Metoden moveTo flyttar pennan till den angivna punkten utan att rita en linje. Den ställer in startpositionen för nästa segment. Utan moveTo är Paths startpunkt som standard på (0, 0). För varje ny sammanhängande kontur krävs en separat moveTo — detta är standardmetoden för att rita flera oberoende linjer i en enda Path.

lineTo — rak linje

lineTo lägger till ett rakt segment från pennans aktuella position till den angivna punkten. Efter anropet av lineTo flyttas den aktuella positionen till segmentets slutpunkt. En sekvens av lineTo-anrop skapar en bruten linje — polylinje. För att stänga konturen används metoden close, som drar en rak linje från den sista punkten till startpunkten för den senaste moveTo.

rLineTo och rMoveTo — relativa versioner av metoderna. De accepterar förskjutningar dx och dy från den aktuella positionen, inte absoluta koordinater. rLineTo är bekvämt för att bygga figurer med upprepade steg, till exempel galler och nät. Relativa metoder kräver inte omräkning av absoluta koordinater vid förflyttning av hela konturen.

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

Bézier-kurvor: quadTo och cubicTo

quadTo lägger till en kvadratisk Bézier-kurva med en kontrollpunkt. Den kvadratiska kurvan definieras av tre punkter: start (aktuell position), kontroll (bestämmer böjningen) och slut. Kontrollpunkten ligger inte på kurvan, men bestämmer riktningen för tangenterna i start- och slutpunkterna. Denna kurvtyp används för enkla avrundningar och mjuka övergångar.

cubicTo — kubisk Bézier-kurva

cubicTo lägger till en kubisk Bézier-kurva med två kontrollpunkter, vilket ger mer flexibilitet vid formning av böjningar. Fyra punkter definierar kurvan: start, två kontroll och slut. Kubiska kurvor används för att bygga komplexa konturer, såsom bokstavskonturer i typsnitt, funktionsgrafer och organiska former.

För bekvämlighet finns relativa versioner rQuadTo och rCubicTo, som accepterar förskjutningar från den aktuella positionen. Detta är särskilt användbart vid programmatisk generering av kurvor baserat på relativa steg, till exempel vid ritning av vågor eller sinusoider. Precisionen hos Bézier-kurvor beror endast på noggrannheten i CPU-beräkningarna — vid ritning rasteriseras de med subpixelupplösning.

Färdiga former: cirklar, rektanglar och bågar

addCircle lägger till en cirkel i Path som en ny kontur. Parametrar: centrumkoordinater, radie och riktning (CW — medurs, CCW — moturs). Efter anropet ändras inte pennans aktuella position — cirkeln läggs till som en oberoende sluten kontur, ej relaterad till tidigare segment. Detta gör det möjligt att kombinera färdiga former med godtyckliga linjer i en enda Path.

addRect och addOval

addRect lägger till en rektangel definierad av koordinaterna för det övre vänstra och nedre högra hörnet. addOval lägger till en ellips inskriven i den angivna rektangeln. Båda metoderna stöder parametern Direction. För rundade hörn används addRoundRect, som accepterar rundningsradier för alla hörn eller en array med 8 radievärden (två per hörn).

arcTo lägger till en cirkel- eller ellipsbåge. Parametrar: begränsningsrektangel, startvinkel i grader, öppningsvinkel och flaggan forceMoveTo. Om forceMoveTo är true utförs en moveTo till bågens startpunkt före bågen, annars ansluts bågen till den aktuella positionen med en rak linje. Bågar används aktivt i cirkeldiagram och förloppsindikatorer.

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

Booleska operationer på konturer (Path Op)

Path.Op — mekanismen för booleska operationer på två konturer, tillgänglig från API 19. Operationerna DIFFERENCE, INTERSECT, UNION, XOR och REVERSE_DIFFERENCE stöds. Resultatet är en ny Path som innehåller geometrin som erhålls efter tillämpning av den valda operationen. Detta gör det möjligt att skapa komplexa former från enkla basfigurer utan manuell beräkning av skärningspunkter.

Tillämpning av Path Op i design

UNION förenar två konturer till en. INTERSECT lämnar endast området som tillhör båda konturerna. DIFFERENCE subtraherar den andra konturen från den första — bekvämt för att skära ut hål i former. XOR lämnar områden som tillhör endast en av konturerna. REVERSE_DIFFERENCE subtraherar den första konturen från den andra.

Metoden op tar emot två Path och operationen, returnerar true om resultatet inte är tomt. Beräkningskomplexiteten för operationen beror på antalet segment i båda konturerna. För enkla figurer (mindre än 100 segment) utförs operationen på submillisekunder. Path Op används aktivt i bildredigerare, designverktyg och vid byggande av komplexa UI-element.

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 med fyrkantigt hål

Exempel på att bygga en komplex figur

Låt oss undersöka skapandet av en anpassad hjärtikon med Path. Figuren byggs av två bågar och två raka linjer som bildar en symmetrisk silhuett. Koden demonstrerar kombinationen av moveTo, cubicTo och close för att erhålla en jämn kontur.

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

Kubiska kurvor cubicTo möjliggör exakt kontroll över formen på varje halva av hjärtat. Den första kurvan bildar den högra övre bågen, den andra — den vänstra, den tredje och fjärde — den nedre delen. Metoden close stänger konturen vid den nedre punkten. Detta tillvägagångssätt används för att skapa anpassade ikoner, logotyper och dekorativa element i applikationer.

För att testa formen kan man tillfälligt aktivera ritning med Paint.Style.STROKE — detta visar alla hjälplinjer och kurvor. Om konturen ser ojämn ut, öka antalet punkter i kurvorna eller använd PathMeasure för att bedöma längden och jämnheten hos segmenten. PathMeasure tillhandahåller exakta vägmetriker som är nödvändiga för animation av rörelse längs konturen.