Path у Android-у — шта је то, методе изградње и како цртати

Шта је Path у Android-у?

Path — класа из пакета android.graphics која представља секвенцу сегмената путање: правих линија, квадратних и кубних Безијерових кривих, лукова кругова и елипси. За разлику од растерских слика, Path чува само математички опис контуре, што омогућава скалирање без губитка квалитета. Величина Path објекта у меморији је пропорционална броју сегмената, а не резолуцији екрана.

Path ради у тесној вези са Canvas и Paint. Canvas.drawPath(path, paint) прима готову контуру и приказује је према стиловима Paint-а. Ово раздвајање омогућава да се једном изгради сложена контура и вишеструко црта са различитим стиловима — бојом, дебљином линије или градијентом. Према Google I/O 2023, поновно коришћење Path-а смањује време цртања прилагођених View-ова за 25–40%.

Сваки Path се састоји од секвенце тачака и типова сегмената. Тачке се задају у координатном систему Canvas-а, где је X оса усмерена удесно, а Y оса — надоле. Почетна тачка контуре се поставља методом moveTo, након чега се сваки наредни сегмент додаје у односу на претходну тачку. Све операције изградње се извршавају на CPU-у и не захтевају GPU до тренутка цртања.

Изградња линија: moveTo и lineTo

Метода moveTo помера оловку до наведене тачке без цртања линије. Она поставља почетну позицију за следећи сегмент. Без moveTo, почетна тачка Path-а је подразумевано на (0, 0). За сваку нову непрекидну контуру потребан је засебан moveTo — ово је стандардни приступ за цртање више независних линија у једном Path-у.

lineTo — права линија

lineTo додаје прави сегмент од тренутне позиције оловке до задате тачке. Након позива lineTo, тренутна позиција се помера на крајњу тачку сегмента. Секвенца lineTo позива креће изломљену линију — полилинију. За затварање контуре користи се метода close, која повлачи праву линију од последње тачке до почетне тачке последњег moveTo-а.

rLineTo и rMoveTo — релативне верзије метода. Оне прихватају помераје dx и dy од тренутне позиције, а не апсолутне координате. rLineTo је погодан за изградњу облика са понављајућим корацима, на пример решетки и мрежа. Релативне методе не захтевају прерачунавање апсолутних координата при померању целе контуре.

val path = Path().apply {
    moveTo(100f, 100f)     // почетна тачка A
    lineTo(300f, 100f)     // A → B
    lineTo(200f, 250f)     // B → C
    close()                    // C → A (затварање)
}

Безијерове криве: quadTo и cubicTo

quadTo додаје квадратну Безијерову криву са једном контролном тачком. Квадратна крива је дефинисана са три тачке: почетном (тренутна позиција), контролном (одређује савијање) и крајњом. Контролна тачка не лежи на кривој, али одређује правац тангената у почетној и крајњој тачки. Овај тип криве се користи за једноставна заобљења и глатке прелазе.

cubicTo — кубна Безијерова крива

cubicTo додаје кубну Безијерову криву са две контролне тачке, што даје више флексибилности при обликовању савијања. Четири тачке одређују криву: почетна, две контролне и крајња. Кубне криве се користе за изградњу сложених контура, као што су контуре слова у фонтовима, графици функција и органски облици.

Ради удобности постоје релативне верзије rQuadTo и rCubicTo, које прихватају помераје од тренутне позиције. Ово је посебно корисно при програмском генерисању кривих на основу релативних прираштаја, на пример при цртању таласа или синусоида. Прецизност Безијерових кривих зависи само од прецизности прорачуна на CPU-у — при цртању се растеризују са субпикселском резолуцијом.

Готови облици: кругови, правоугаоници и лукови

addCircle додаје круг у Path као нову контуру. Параметри: координате центра, полупречник и смер обиласка (CW — у смеру казаљке на сату, CCW — супротно). Након позива, тренутна позиција оловке се не мења — круг се додаје као самостална затворена контура, неповезана са претходним сегментима. Ово омогућава комбиновање готових облика са произвољним линијама у једном Path-у.

addRect и addOval

addRect додаје правоугаоник задат координатама горњег левог и доњег десног угла. addOval додаје елипсу уписану у наведени правоугаоник. Обе методе подржавају параметар Direction. За заобљене углове користи се addRoundRect, који прихвата полупречнике заобљења за све углове или низ од 8 вредности полупречника (по две по углу).

arcTo додаје лук круга или елипсе. Параметри: ограничавајући правоугаоник, почетни угао у степенима, угао разворота и застава forceMoveTo. Ако је forceMoveTo true, пре лука се извршава moveTo до почетне тачке лука, у супротном се лук повезује са тренутном позицијом правом линијом. Лукови се активно користе у кружним дијаграмима и индикаторима напретка.

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

Булове операције над контурама (Path Op)

Path.Op — механизам Булових операција над две контуре, доступан од API 19. Подржане су операције DIFFERENCE, INTERSECT, UNION, XOR и REVERSE_DIFFERENCE. Резултат је нови Path који садржи геометрију добијену након примене изабране операције. Ово омогућава креирање сложених облика од једноставних основних фигура без ручног израчунавања тачака пресека.

Примена Path Op-а у дизајну

UNION спаја две контуре у једну. INTERSECT оставља само област која припада обема контурама. DIFFERENCE одузима другу контуру од прве — погодно за изрезивање „рупа” у облицима. XOR оставља области које припадају само једној од контура. REVERSE_DIFFERENCE одузима прву контуру од друге.

Метода op прима два Path-а и операцију, враћајући true ако резултат није празан. Рачунска сложеност операције зависи од броја сегмената у обе контуре. За једноставне облике (мање од 100 сегмената) операција се извршава за субмилисекунде. Path Op се активно примењује у едиторима слика, дизајнерским алатима и при изградњи сложених UI елемената.

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) // круг са квадратном рупом

Пример изградње сложене фигуре

Размотримо креирање прилагођене иконе „срце” помоћу Path-а. Фигура се гради од два лука и две праве линије, које формирају симетрични силует. Код демонстрира комбинацију moveTo, cubicTo и close за добијање глатке контуре.

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

Кубне криве cubicTo омогућавају прецизну контролу облика сваке половине срца. Прва крива формира десни горњи лук, друга — леви, трећа и четврта — доњи део. Метода close затвара контуру у доњој тачки. Овакав приступ се примењује за креирање прилагођених икона, логотипа и декоративних елемената у апликацијама.

За тестирање облика може се привремено укључити цртање са Paint.Style.STROKE — ово ће показати све помоћне линије и криве. Ако контура изгледа неравномерно, повећајте број тачака у кривама или користите PathMeasure за процену дужине и равномерности сегмената. PathMeasure пружа тачне метрике путање, неопходне за анимацију кретања дуж контуре.