Path в Android — що це, методи побудови та як малювати

Що таке Path в Android?

Path — клас з пакета android.graphics, що представляє собою послідовність сегментів шляху: прямих ліній, квадратичних та кубічних кривих Безьє. Кожен сегмент додається викликом одного з методів moveTo/lineTo/quadTo/cubicTo.

Path працює в тісній зв'язці з Canvas та Paint. Canvas.drawPath(path, paint) приймає готовий Path і малює його поточними налаштуваннями пензля. Це основний спосіб малювання довільних фігур, що виходять за рамки прямокутників та кіл.

Кожен Path складається з послідовності точок та типів сегментів. Точки задаються в системі координат Canvas, де вісь X направлена вправо, а вісь Y — вниз. За замовчуванням початок координат — лівий верхній кут View, але його можна змістити через Canvas.translate.

Побудова ліній: moveTo та lineTo

Метод moveTo переміщує перо в указану точку без малювання лінії. Він задає початкову позицію для наступного сегмента. Без moveTo Path починає з точки (0,0).

lineTo — пряма лінія

lineTo додає прямий відрізок від поточної позиції пера до заданої точки. Після виклику lineTo поточна позиція переміщується в кінцеву точку відрізка.

rLineTo та rMoveTo — відносні версії методів. Вони приймають зміщення dx та dy від поточної позиції, а не абсолютні координати.

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, що приймають зміщення від поточної позиції.

Готові фігури: кола, прямокутники та дуги

addCircle додає коло в Path як новий контур. Параметри: координати центру, радіус та напрямок (CW — за годинниковою стрілкою, CCW — проти годинникової стрілки).

addRect та addOval

addRect додає прямокутник, заданий координатами лівого верхнього та правого нижнього кутів. addOval — овал, вписаний у заданий прямокутник. addRoundRect — прямокутник із заокругленими кутами.

arcTo додає дугу кола або еліпса. Параметри: обмежувальний прямокутник, початковий кут у градусах, кут дуги та прапорець forceMoveTo.

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. Підтримуються операції UNION, INTERSECT, DIFFERENCE та XOR.

Застосування Path Op у дизайні

UNION об'єднує два контури в один. INTERSECT залишає тільки область, що належить обом контурам. DIFFERENCE віднімає другий контур від першого. XOR залишає області, що належать тільки одному з контурів.

Метод op приймає два Path та операцію, повертаючи true якщо результат не порожній. Обчислювальна складність — O(n*m), де n та m — кількість сегментів у кожному Path.

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. Фігура будується з двох дуг та двох прямих відрізків з використанням cubicTo.

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 дозволяють точно контролювати форму кожної половини серця. Перша крива формує ліву половину, друга — праву. Прямі відрізки внизу з'єднують криві у вершину серця.

Для тестування форми можна тимчасово включити відмальовку з Paint.Style.STROKE — це покаже всі опорні точки та сегменти Path.