Path v Androidu — co to je, metody vytváření a jak kreslit

Co je Path v Androidu?

Path — třída z balíčku android.graphics představující sekvenci segmentů cesty: přímky, kvadratické a kubické Bézierovy křivky, oblouky kružnic a elips. Na rozdíl od rastrových obrázků Path ukládá pouze matematický popis obrysu, což umožňuje škálování bez ztráty kvality. Velikost objektu Path v paměti je úměrná počtu segmentů, nikoli rozlišení obrazovky.

Path pracuje v těsné spolupráci s Canvas a Paint. Canvas.drawPath(path, paint) převezme hotový obrys a zobrazí jej podle stylů Paint. Toto oddělení umožňuje jednou vytvořit složitý obrys a opakovaně jej kreslit s různými styly — barvou, tloušťkou čáry nebo přechodem. Podle Google I/O 2023 snižuje opakované použití Path čas kreslení vlastních View o 25–40%.

Každý Path se skládá z posloupnosti bodů a typů segmentů. Body jsou definovány v souřadnicovém systému Canvas, kde osa X směřuje doprava a osa Y dolů. Počáteční bod obrysu je nastaven metodou moveTo, po které je každý následující segment přidán relativně k předchozímu bodu. Všechny operace vytváření se provádějí na CPU a nevyžadují GPU až do okamžiku kreslení.

Vytváření čar: moveTo a lineTo

Metoda moveTo přesune pero do zadaného bodu bez kreslení čáry. Nastaví počáteční pozici pro následující segment. Bez moveTo je výchozí bod Path standardně na (0, 0). Pro každý nový souvislý obrys je vyžadován samostatný moveTo — to je standardní přístup pro kreslení několika nezávislých čar v jednom Path.

lineTo — přímka

lineTo přidá přímý segment z aktuální pozice pera do zadaného bodu. Po volání lineTo se aktuální pozice přesune do koncového bodu segmentu. Sekvence volání lineTo vytváří lomenou čáru — polygonální čáru. Pro uzavření obrysu se používá metoda close, která vede přímku z posledního bodu do počátečního bodu posledního moveTo.

rLineTo a rMoveTo — relativní verze metod. Přijímají posuny dx a dy od aktuální pozice, nikoli absolutní souřadnice. rLineTo je vhodný pro vytváření obrazců s opakujícími se kroky, například mřížek a sítí. Relativní metody nevyžadují přepočet absolutních souřadnic při posunu celého obrysu.

val path = Path().apply {
    moveTo(100f, 100f)     // počáteční bod A
    lineTo(300f, 100f)     // A → B
    lineTo(200f, 250f)     // B → C
    close()                    // C → A (uzavření)
}

Bézierovy křivky: quadTo a cubicTo

quadTo přidá kvadratickou Bézierovu křivku s jedním řídicím bodem. Kvadratická křivka je definována třemi body: počátečním (aktuální pozice), řídicím (určuje ohyb) a koncovým. Řídicí bod neleží na křivce, ale určuje směr tečen v počátečním a koncovém bodě. Tento typ křivky se používá pro jednoduchá zaoblení a plynulé přechody.

cubicTo — kubická Bézierova křivka

cubicTo přidá kubickou Bézierovu křivku se dvěma řídicími body, což poskytuje větší flexibilitu při tvarování ohybů. Čtyři body definují křivku: počáteční, dva řídicí a koncový. Kubické křivky se používají pro vytváření složitých obrysů, jako jsou obrysy písmen v fontech, grafy funkcí a organické tvary.

Pro pohodlí existují relativní verze rQuadTo a rCubicTo, které přijímají posuny od aktuální pozice. To je zvláště užitečné při programovém generování křivek na základě relativních přírůstků, například při kreslení vln nebo sinusoid. Přesnost Bézierových křivek závisí pouze na přesnosti výpočtů na CPU — při kreslení jsou rasterizovány s subpixelovým rozlišením.

Hotové tvary: kruhy, obdélníky a oblouky

addCircle přidá kruh do Path jako nový obrys. Parametry: souřadnice středu, poloměr a směr obcházení (CW — po směru hodinových ručiček, CCW — proti směru). Po volání se aktuální pozice pera nemění — kruh se přidá jako samostatný uzavřený obrys, nesouvisející s předchozími segmenty. To umožňuje kombinovat hotové tvary s libovolnými čarami v jednom Path.

addRect a addOval

addRect přidá obdélník definovaný souřadnicemi levého horního a pravého dolního rohu. addOval přidá elipsu vepsanou do zadaného obdélníku. Obě metody podporují parametr Direction. Pro zaoblené rohy se používá addRoundRect, který přijímá poloměry zaoblení pro všechny rohy nebo pole 8 hodnot poloměru (dvě na roh).

arcTo přidá oblouk kružnice nebo elipsy. Parametry: ohraničující obdélník, počáteční úhel ve stupních, úhel otevření a příznak forceMoveTo. Pokud je forceMoveTo true, před obloukem se provede moveTo do počátečního bodu oblouku, jinak se oblouk spojí s aktuální pozicí přímkou. Oblouky se aktivně používají v kruhových diagramech a indikátorech průběhu.

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

Booleovské operace na obrysech (Path Op)

Path.Op — mechanismus booleovských operací na dvou obrysech, dostupný od API 19. Podporovány jsou operace DIFFERENCE, INTERSECT, UNION, XOR a REVERSE_DIFFERENCE. Výsledkem je nový Path obsahující geometrii získanou po aplikaci vybrané operace. To umožňuje vytvářet složité tvary z jednoduchých základních obrazců bez ručního výpočtu průsečíků.

Použití Path Op v designu

UNION spojí dva obrysy do jednoho. INTERSECT ponechá pouze oblast patřící oběma obrysům. DIFFERENCE odečte druhý obrys od prvního — vhodné pro vyřezávání děr v tvarech. XOR ponechá oblasti patřící pouze jednomu z obrysů. REVERSE_DIFFERENCE odečte první obrys od druhého.

Metoda op přijímá dva Path a operaci, vrací true pokud výsledek není prázdný. Výpočetní složitost operace závisí na počtu segmentů v obou obrysech. Pro jednoduché tvary (méně než 100 segmentů) se operace provede v submilisekundách. Path Op se aktivně používá v editorech obrázků, designových nástrojích a při vytváření složitých UI prvků.

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) // kruh se čtvercovým otvorem

Příklad vytvoření složitého obrazce

Podívejme se na vytvoření vlastní ikony srdce pomocí Path. Obrazec se skládá ze dvou oblouků a dvou přímek, tvořících symetrickou siluetu. Kód demonstruje kombinaci moveTo, cubicTo a close pro dosažení hladkého obrysu.

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

Kubické křivky cubicTo umožňují přesně kontrolovat tvar každé poloviny srdce. První křivka tvoří pravý horní oblouk, druhá — levý, třetí a čtvrtá — spodní část. Metoda close uzavírá obrys ve spodním bodě. Tento přístup se používá pro vytváření vlastních ikon, log a dekorativních prvků v aplikacích.

Pro testování tvaru lze dočasně zapnout kreslení s Paint.Style.STROKE — to zobrazí všechny pomocné čáry a křivky. Pokud obrys vypadá nerovnoměrně, zvyšte počet bodů v křivkách nebo použijte PathMeasure pro posouzení délky a rovnoměrnosti segmentů. PathMeasure poskytuje přesné metriky cesty, nezbytné pro animaci pohybu podél obrysu.