Path Androidban — mi ez, építési metódusok és hogyan rajzoljunk

Mi a Path Androidban?

Path — egy osztály az android.graphics csomagból, amely útszakaszok sorozatát reprezentálja: egyenes vonalak, másodfokú és köbös Bézier-görbék, kör- és ellipszisívek. A raszteres képekkel ellentétben a Path csak a kontúr matematikai leírását tárolja, ami lehetővé teszi a minőségveszteség nélküli méretezést. A Path objektum memóriamérete arányos a szegmensek számával, nem a képernyő felbontásával.

A Path szoros kapcsolatban működik a Canvas-szel és a Paint-tel. A Canvas.drawPath(path, paint) átveszi a kész kontúrt és megjeleníti azt a Paint stílusai szerint. Ez a szétválasztás lehetővé teszi, hogy egyszer építsünk egy összetett kontúrt, és többször rajzoljuk ki különböző stílusokkal — szín, vonalvastagság vagy gradiens. A Google I/O 2023 szerint a Path újrafelhasználása 25–40%-kal csökkenti az egyedi View-k rajzolási idejét.

Minden Path pontok és szegmenstípusok sorozatából áll. A pontok a Canvas koordinátarendszerében vannak meghatározva, ahol az X tengely jobbra, az Y tengely pedig lefelé mutat. A kontúr kezdőpontját a moveTo metódus állítja be, ezután minden következő szegmens az előző ponthoz képest kerül hozzáadásra. Minden építési művelet a CPU-n történik, és nem igényel GPU-t a rajzolás pillanatáig.

Vonalak építése: moveTo és lineTo

A moveTo metódus a tollat a megadott pontba mozgatja vonal rajzolása nélkül. Beállítja a kezdő pozíciót a következő szegmenshez. moveTo nélkül a Path kezdőpontja alapértelmezés szerint (0, 0). Minden új folyamatos kontúrhoz külön moveTo szükséges — ez a standard megközelítés több független vonal rajzolásához egy Path-ban.

lineTo — egyenes vonal

lineTo egy egyenes szakaszt ad hozzá a toll aktuális pozíciójától a megadott pontig. A lineTo hívása után az aktuális pozíció a szakasz végpontjába kerül. A lineTo hívások sorozata tört vonalat — polivonalat hoz létre. A kontúr lezárásához a close metódus használatos, amely egyenes vonalat húz az utolsó ponttól az utolsó moveTo kezdőpontjáig.

rLineTo és rMoveTo — a metódusok relatív verziói. Ezek dx és dy eltolásokat fogadnak el az aktuális pozíciótól, nem abszolút koordinátákat. rLineTo kényelmes ismétlődő lépésekkel rendelkező alakzatok építéséhez, például rácsok és hálók esetén. A relatív metódusok nem igénylik az abszolút koordináták újraszámolását a teljes kontúr elmozdításakor.

val path = Path().apply {
    moveTo(100f, 100f)     // A kezdőpont
    lineTo(300f, 100f)     // A → B
    lineTo(200f, 250f)     // B → C
    close()                    // C → A (zárás)
}

Bézier-görbék: quadTo és cubicTo

quadTo egy másodfokú Bézier-görbét ad hozzá egy vezérlőponttal. A másodfokú görbét három pont határozza meg: kezdő (aktuális pozíció), vezérlő (meghatározza a hajlítást) és vég. A vezérlőpont nem a görbén fekszik, de meghatározza az érintők irányát a kezdő és végpontokban. Ezt a görbetípust egyszerű lekerekítésekhez és sima átmenetekhez használják.

cubicTo — köbös Bézier-görbe

cubicTo egy köbös Bézier-görbét ad hozzá két vezérlőponttal, ami nagyobb rugalmasságot biztosít a hajlítások formálásában. Négy pont határozza meg a görbét: kezdő, két vezérlő és vég. A köbös görbéket összetett kontúrok építéséhez használják, mint például betűkontúrok betűtípusokban, függvénygrafikonok és organikus formák.

A kényelem érdekében léteznek a rQuadTo és rCubicTo relatív verziók, amelyek az aktuális pozíciótól való eltolásokat fogadják el. Ez különösen hasznos görbék programozott generálásakor relatív növekmények alapján, például hullámok vagy szinuszoidok rajzolásakor. A Bézier-görbék pontossága csak a CPU számítási pontosságától függ — rajzoláskor szubpixel felbontással raszterizálódnak.

Kész formák: körök, téglalapok és ívek

addCircle kört ad a Path-hoz új kontúrként. Paraméterek: középpont koordinátái, sugár és bejárási irány (CW — óramutató járásával megegyező, CCW — ellentétes). A hívás után a toll aktuális pozíciója nem változik — a kör független zárt kontúrként kerül hozzáadásra, nem kapcsolódva az előző szegmensekhez. Ez lehetővé teszi kész formák és tetszőleges vonalak kombinálását egy Path-ban.

addRect és addOval

addRect egy téglalapot ad hozzá a bal felső és jobb alsó sarok koordinátáival meghatározva. addOval egy ellipszist ad hozzá a megadott téglalapba írva. Mindkét metódus támogatja a Direction paramétert. Lekerekített sarkokhoz az addRoundRect használatos, amely lekerekítési sugarakat fogad el az összes sarokhoz vagy 8 sugárértékből álló tömböt (kettőt sarkonként).

arcTo egy kör- vagy ellipszisívet ad hozzá. Paraméterek: határoló téglalap, kezdőszög fokban, nyílásszög és a forceMoveTo zászló. Ha forceMoveTo true, az ív előtt egy moveTo történik az ív kezdőpontjához, ellenkező esetben az ív egy egyenes vonallal kapcsolódik az aktuális pozícióhoz. Az íveket aktívan használják kördiagramokban és folyamatjelzőkben.

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

Logikai műveletek kontúrokon (Path Op)

Path.Op — a logikai műveletek mechanizmusa két kontúron, elérhető API 19-től. Támogatott műveletek: DIFFERENCE, INTERSECT, UNION, XOR és REVERSE_DIFFERENCE. Az eredmény egy új Path, amely a kiválasztott művelet alkalmazása után kapott geometriát tartalmazza. Ez lehetővé teszi összetett formák létrehozását egyszerű alap alakzatokból a metszéspontok kézi számolása nélkül.

A Path Op alkalmazása a tervezésben

UNION egyesít két kontúrt egybe. INTERSECT csak a mindkét kontúrhoz tartozó területet hagyja meg. DIFFERENCE kivonja a második kontúrt az elsőből — kényelmes lyukak kivágásához alakzatokban. XOR csak az egyik kontúrhoz tartozó területeket hagyja meg. REVERSE_DIFFERENCE kivonja az első kontúrt a másodikból.

Az op metódus két Path-t és a műveletet fogadja, true-t visszaadva, ha az eredmény nem üres. A művelet számítási komplexitása a kontúrok szegmenseinek számától függ. Egyszerű alakzatoknál (kevesebb mint 100 szegmens) a művelet szubmilliszekundumok alatt végrehajtódik. A Path Op-ot aktívan használják képszerkesztőkben, tervezőeszközökben és összetett UI elemek építésénél.

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) // kör négyzet alakú lyukkal

Példa összetett alakzat építésére

Vizsgáljuk meg egy egyedi szív ikon létrehozását Path segítségével. Az alakzat két ívből és két egyenes vonalból épül fel, amelyek szimmetrikus sziluettet alkotnak. A kód a moveTo, cubicTo és close kombinációját mutatja be egy sima kontúr eléréséhez.

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

Köbös görbék cubicTo lehetővé teszik a szív mindkét felének pontos alakvezérlését. Az első görbe a jobb felső ívet, a második a balt, a harmadik és negyedik az alsó részt formálja. A close metódus az alsó pontban zárja le a kontúrt. Ezt a megközelítést alkalmazzák egyedi ikonok, logók és dekoratív elemek létrehozásához alkalmazásokban.

Az alakzat teszteléséhez ideiglenesen bekapcsolható a rajzolás Paint.Style.STROKE segítségével — ez megmutatja az összes segédvonalat és görbét. Ha a kontúr egyenetlennek tűnik, növelje a pontok számát a görbékben, vagy használja a PathMeasure-t a szegmensek hosszának és egyenletességének értékeléséhez. A PathMeasure pontos útvonalmetrikákat biztosít, amelyek szükségesek a kontúr mentén történő mozgás animálásához.