Рисование геометрических путей

DrawScope также поддерживает рисование путей. Пути — это, по сути, линии, нарисованные между набором точек. Для отрисовки путей применяется функция drawPath():

fun drawPath(
    path: Path,
    color: Color,
    alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
): Unit

Эта функция принимает следующие параметры:

• path: объект класса Path, который представляет путь

• color: цвет пути

• alpha: прозрачность, применяемая к цвету пути в виде значения из диапазона от 0.0f до 1.0f

• style: стиль заполнения пути

• colorFilter: цветовой фильтр ColorFilter, который применяется к цвету пути

• blendMode: алгоритм смешивания, применяемый к цвету

Для создания пути сначала вызывается функция moveTo(), которая определяет начальную точку первой линии. Затем линия рисуется до следующей позиции с помощью функций lineTo() или relativeLineTo() Функция lineTo() принимает координаты x и y следующей позиции относительно верхнего левого угла компонента Canvas. А функция relativeLineTo() принимает координаты относительно предыдущей точки и поэтому могут быть отрицательными или положительными. Класс Path также включает функции для рисования непрямых линий, включая кубические и квадратичные кривые Безье. Например, функция quadraticBezierTo() выводит квадратичную Безье и принимает координаты двух опорных точек. Для завершения пути вызывается функция close()

Пример пути:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.graphics.Path


class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Canvas(Modifier.size(300.dp).background(Color.LightGray)) {
                // определяем путь
                val path = Path().apply {
                    moveTo(0f, 0f)
                    quadraticBezierTo(40.dp.toPx(), 200.dp.toPx(), 300.dp.toPx(), 300.dp.toPx())
                    lineTo(270.dp.toPx(), 100.dp.toPx())
                    quadraticBezierTo(50.dp.toPx(), 80.dp.toPx(), 0f, 0f)
                    close()
                }
                // рисуем путь
                drawPath(path,Color.Blue)
            }
        }
    }
}

Другой пример - нарисуем треугольник:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.drawscope.Stroke

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Canvas(Modifier.size(300.dp).background(Color.LightGray)) {
                // определяем путь
                val path = Path().apply {
                    moveTo(0f, size.height/2)
                    lineTo(size.width/2, 0f)
                    lineTo(size.width, size.height/2)
                    close()
                }
                // рисуем путь
                drawPath(path,Color.Blue, style= Stroke(width=3f))
            }
        }
    }
}