1. Рисование круга
Начнем с чего-нибудь простого — нарисуем круг.
@Composable
fun DrawCircle() {
Canvas(
modifier = Modifier
.size(200.dp)
.background(Color.White)
.border(2.dp, color = Color.Blue)
) {
drawCircle(color = Color.Red, radius = 100f)
}
}2. Рисование прямоугольника
Нарисовать прямоугольник так же просто.
@Composable
fun DrawRectangle() {
Canvas(
modifier = Modifier
.size(200.dp)
.background(Color.White)
.border(2.dp, color = Color.Blue)
) {
drawRect(color = Color.Green, size = size)
}
}3. Построение линии
Для построения линии требуется две точки: начальная и конечная.
@Composable
fun DrawLine() {
Canvas(
modifier = Modifier
.size(200.dp)
.background(Color.White)
.border(2.dp, color = Color.Red)
) {
drawLine(
color = Color.Blue,
start = Offset.Zero,
end = Offset(size.width, size.height),
strokeWidth = 4f
)
}4. Создание текста
Можно также создать текст на холсте.
@Composable
fun DrawCanvasText() {
val paint = Paint().asFrameworkPaint().apply {
// paint configuration
this.textSize = 60f
}
Canvas(
modifier = Modifier
.size(200.dp)
.background(Color.White)
.border(2.dp, color = Color.Red)
) {
drawIntoCanvas {
it.nativeCanvas.drawText("Hello, Canvas!", 20f, 200f, paint)
}
}
}5. Создание контура
Контур — это серия соединенных линий и кривых. Вот как нарисовать простой треугольник с помощью контура.
@Composable
fun DrawTriangle() {
Canvas(
modifier = Modifier
.size(200.dp)
) {
val path = Path().apply {
moveTo(size.width / 2, 0f)
lineTo(size.width, size.height)
lineTo(0f, size.height)
close()
}
drawPath(path = path, color = Color.Magenta)
}
}6. Рисование дуги
Дуга — это сегмент окружности. Можно нарисовать дугу, указав начальный угол и угол поворота.
@Composable
fun DrawArc() {
Canvas(modifier = Modifier.size(200.dp)) {
drawArc(
color = Color.Cyan,
startAngle = 0f,
sweepAngle = 270f,
useCenter = true,
topLeft = Offset.Zero,
size = size
)
}
}
7. Применение техники отсекания
Можно применить технику отсекания, чтобы ограничить область рисования на холсте. Вот пример применения кругового отсекания.
@Composable
fun ApplyClip() {
Canvas(modifier = Modifier.size(200.dp)) {
clipPath(Path().apply { addOval(Rect(Offset.Zero, size)) }) {
drawRect(color = Color.Yellow)
}
}
}8. Применение техники трансформации
Можно применить технику трансформации на холсте, чтобы изменить способ выполнения последующих операций рисования. Вот пример применения вращения.
@Composable
fun ApplyTransform() {
Canvas(modifier = Modifier.size(200.dp)) {
rotate(45f) {
drawRect(color = Color.Blue)
}
}9. Рисование с использованием шейдера
Шейдер — это инструмент для определения цвета каждого пикселя при рисовании. Вот пример рисования с помощью линейного градиентного шейдера.
@Composable
fun DrawWithShader() {
Canvas(modifier = Modifier.size(200.dp)) {
val shader = Brush.linearGradient(
colors = listOf(Color.Red, Color.Blue),
start = Offset.Zero,
end = Offset(size.width, size.height)
)
drawRect(brush = shader)
}
}10. Настройка индикатора выполнения
📌Статья
@android_its