Path sa Android — ano ito, mga paraan ng pagbuo at kung paano gumuhit

Ano ang Path sa Android?

Path — isang klase mula sa paketeng android.graphics na kumakatawan sa isang pagkakasunod-sunod ng mga segment ng landas: mga tuwid na linya, quadratic at cubic Bézier curve, bilog at ellipse na arko. Hindi tulad ng mga raster na imahe, ang Path ay nag-iimbak lamang ng matematikal na paglalarawan ng contour, na nagpapahintulot sa pag-scale nang walang pagkawala ng kalidad. Ang laki ng object ng Path sa memorya ay proporsyonal sa bilang ng mga segment, hindi sa resolusyon ng screen.

Ang Path ay gumagana nang malapit sa Canvas at Paint. Ang Canvas.drawPath(path, paint) ay tumatanggap ng handa nang contour at ipinapakita ito ayon sa mga estilo ng Paint. Ang paghihiwalay na ito ay nagpapahintulot sa isang beses na pagbuo ng kumplikadong contour at paulit-ulit na pagguhit nito na may iba't ibang estilo — kulay, kapal ng linya o gradient. Ayon sa Google I/O 2023, ang muling paggamit ng Path ay nagbabawas ng oras ng pagguhit ng mga custom na View ng 25–40%.

Ang bawat Path ay binubuo ng isang pagkakasunod-sunod ng mga punto at uri ng segment. Ang mga punto ay tinukoy sa coordinate system ng Canvas, kung saan ang X axis ay nakaturo pakanan, at ang Y axis — pababa. Ang panimulang punto ng contour ay itinatakda ng pamamaraang moveTo, pagkatapos nito ang bawat kasunod na segment ay idinadagdag kaugnay sa naunang punto. Lahat ng operasyon ng pagbuo ay isinasagawa sa CPU at hindi nangangailangan ng GPU hanggang sa sandali ng pagguhit.

Pagbuo ng mga linya: moveTo at lineTo

Ang pamamaraang moveTo ay naglilipat ng panulat sa tinukoy na punto nang hindi gumuguhit ng linya. Itinatakda nito ang panimulang posisyon para sa susunod na segment. Kung walang moveTo, ang panimulang punto ng Path ay nasa (0, 0) bilang default. Para sa bawat bagong tuloy-tuloy na contour ay kinakailangan ang hiwalay na moveTo — ito ang karaniwang paraan para sa pagguhit ng maraming independiyenteng linya sa isang Path.

lineTo — tuwid na linya

lineTo ay nagdaragdag ng tuwid na segment mula sa kasalukuyang posisyon ng panulat hanggang sa tinukoy na punto. Pagkatapos ng tawag sa lineTo, ang kasalukuyang posisyon ay lumilipat sa dulong punto ng segment. Ang pagkakasunod-sunod ng mga tawag sa lineTo ay lumilikha ng putol na linya — polyline. Para sa pagsasara ng contour, ginagamit ang pamamaraang close, na gumuguhit ng tuwid na linya mula sa huling punto patungo sa panimulang punto ng huling moveTo.

rLineTo at rMoveTo — mga relatibong bersyon ng mga pamamaraan. Tumatanggap sila ng mga displacement dx at dy mula sa kasalukuyang posisyon, hindi ganap na coordinate. rLineTo ay maginhawa para sa pagbuo ng mga figure na may paulit-ulit na hakbang, halimbawa mga grid at lambat. Ang mga relatibong pamamaraan ay hindi nangangailangan ng muling pagkalkula ng ganap na coordinate kapag inililipat ang buong contour.

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

Bézier curve: quadTo at cubicTo

quadTo ay nagdaragdag ng quadratic Bézier curve na may isang control point. Ang quadratic curve ay tinutukoy ng tatlong punto: simula (kasalukuyang posisyon), control (tinutukoy ang kurba) at dulo. Ang control point ay hindi nakalagay sa curve, ngunit tinutukoy ang direksyon ng mga tangent sa simula at dulo na punto. Ang uri ng curve na ito ay ginagamit para sa mga simpleng pagbilog at malalambot na transition.

cubicTo — cubic Bézier curve

cubicTo ay nagdaragdag ng cubic Bézier curve na may dalawang control point, na nagbibigay ng higit na flexibility sa pagbuo ng mga kurba. Apat na punto ang tumutukoy sa curve: simula, dalawang control at dulo. Ang cubic curve ay ginagamit para sa pagbuo ng kumplikadong contour, tulad ng mga contour ng letra sa mga font, graph ng function at organikong hugis.

Para sa kaginhawahan, may mga relatibong bersyon na rQuadTo at rCubicTo, na tumatanggap ng mga displacement mula sa kasalukuyang posisyon. Ito ay lalong kapaki-pakinabang sa programmatic na pagbuo ng mga curve batay sa relatibong increment, halimbawa sa pagguhit ng mga alon o sinusoid. Ang katumpakan ng Bézier curve ay nakasalalay lamang sa accuracy ng pagkalkula sa CPU — sa pagguhit, sila ay nira-rasterize na may subpixel na resolusyon.

Handa nang hugis: bilog, parihaba at arko

addCircle ay nagdaragdag ng bilog sa Path bilang bagong contour. Parameter: coordinate ng gitna, radius at direksyon ng pag-ikot (CW — clockwise, CCW — counterclockwise). Pagkatapos ng tawag, ang kasalukuyang posisyon ng panulat ay hindi nagbabago — ang bilog ay idinadagdag bilang isang independiyenteng saradong contour, hindi nauugnay sa mga naunang segment. Ito ay nagpapahintulot sa pagsasama ng mga handa nang hugis sa arbitraryong linya sa isang Path.

addRect at addOval

addRect ay nagdaragdag ng parihaba na tinutukoy ng coordinate ng kaliwang itaas at kanang ibabang sulok. addOval ay nagdaragdag ng ellipse na nakasulat sa tinukoy na parihaba. Parehong pamamaraan ay sumusuporta sa parameter na Direction. Para sa bilugan na sulok, ginagamit ang addRoundRect, na tumatanggap ng radius ng pagbilog para sa lahat ng sulok o array ng 8 radius value (dalawa bawat sulok).

arcTo ay nagdaragdag ng arko ng bilog o ellipse. Parameter: naglilimitang parihaba, panimulang anggulo sa degree, anggulo ng pagbukas at flag na forceMoveTo. Kung ang forceMoveTo ay true, bago ang arko ay isinasagawa ang moveTo sa panimulang punto ng arko, kung hindi, ang arko ay ikinokonekta sa kasalukuyang posisyon sa pamamagitan ng tuwid na linya. Ang mga arko ay aktibong ginagamit sa circular diagram at progress indicator.

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

Boolean na operasyon sa mga contour (Path Op)

Path.Op — mekanismo ng Boolean na operasyon sa dalawang contour, available mula sa API 19. Ang mga operasyon na DIFFERENCE, INTERSECT, UNION, XOR at REVERSE_DIFFERENCE ay sinusuportahan. Ang resulta ay isang bagong Path na naglalaman ng geometry na nakuha pagkatapos ilapat ang napiling operasyon. Ito ay nagpapahintulot sa paglikha ng kumplikadong hugis mula sa simpleng base figure nang walang manu-manong pagkalkula ng mga punto ng interseksyon.

Aplikasyon ng Path Op sa disenyo

UNION ay pinagsasama ang dalawang contour sa isa. INTERSECT ay nag-iiwan lamang ng lugar na kabilang sa parehong contour. DIFFERENCE ay nagbabawas ng ikalawang contour mula sa una — maginhawa para sa paggupit ng mga butas sa mga hugis. XOR ay nag-iiwan ng mga lugar na kabilang lamang sa isa sa mga contour. REVERSE_DIFFERENCE ay nagbabawas ng unang contour mula sa ikalawa.

Ang pamamaraang op ay tumatanggap ng dalawang Path at operasyon, nagbabalik ng true kung ang resulta ay hindi walang laman. Ang computational complexity ng operasyon ay nakasalalay sa bilang ng mga segment sa parehong contour. Para sa simpleng figure (mas mababa sa 100 segment), ang operasyon ay isinasagawa sa submillisecond. Ang Path Op ay aktibong ginagamit sa mga editor ng imahe, tool sa disenyo at sa pagbuo ng kumplikadong UI elemento.

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) // bilog na may parisukat na butas

Halimbawa ng pagbuo ng kumplikadong figure

Isaalang-alang natin ang paglikha ng custom na icon ng puso gamit ang Path. Ang figure ay itinayo mula sa dalawang arko at dalawang tuwid na linya, na bumubuo ng simetrikal na silweta. Ang code ay nagpapakita ng kombinasyon ng moveTo, cubicTo at close para sa pagkuha ng malambot na 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
    }
}

Cubic curve cubicTo ay nagpapahintulot ng tumpak na kontrol sa hugis ng bawat kalahati ng puso. Ang unang curve ay bumubuo ng kanang itaas na arko, ang ikalawa — kaliwa, ang ikatlo at ikaapat — ibabang bahagi. Ang pamamaraang close ay nagsasara ng contour sa ibabang punto. Ang ganitong paraan ay ginagamit para sa paglikha ng custom na icon, logo at dekoratibong elemento sa mga aplikasyon.

Para sa pagsubok ng hugis, maaaring pansamantalang i-activate ang pagguhit gamit ang Paint.Style.STROKE — ito ay magpapakita ng lahat ng gabay na linya at kurba. Kung ang contour ay mukhang hindi pantay, dagdagan ang bilang ng mga punto sa mga kurba o gamitin ang PathMeasure para sa pagsusuri ng haba at pagkakapantay-pantay ng mga segment. Ang PathMeasure ay nagbibigay ng tumpak na metrik ng landas, kinakailangan para sa animation ng paggalaw kasama ang contour.