Рисование. Canvas

Компонент Canvas и DrawScope

Jetpack Compose предоставляет возможность для отрисовки графики в мобильном приложении. Для этого применяется компонент Canvas. По сути данный компонент предоставляет поверхность для рисования 2D-графики и инструменты для управления состоянием графического контента.

Компонент Canvas имеет следующие формы:

@Composable
fun Canvas(modifier: Modifier, onDraw: DrawScope.() -> Unit): Unit

@Composable
fun Canvas(modifier: Modifier, contentDescription: String, onDraw: DrawScope.() -> Unit): Unit

Параметры компонента:

• modifier: применяемые к компоненту функции модификатора

• onDraw: лямбда-выражение, которое будет вызываться для отрисовки графических примитивов. Обратите внимание, что это лямбда-выражение будет вызываться на этапе рисования, а это означает, что вызов функции Composable внутри этого выражения приведет к исключению во время выполнения.

• contentDescription: текст, используемый службами доступности для описания того, что представляет собой этот компонент.

Например, определим простейший компонент Canvas без какой-либо графики:

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


class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Canvas(Modifier.size(300.dp).background(Color.LightGray)) {
                // здесь отрисовка графики
            }
        }
    }
}

В данном случае для комопнента Canvas определяется прямоугольная область 300х300, окрашенная серым цветом:

DrawScope

Canvas имеет собственную область действия в виде объекта DrawScope, который предоставляет доступ к свойствам поверхности рисования:

• center: центральная точка поверхности рисования в виде объекта Offset

• drawContext: объект DrawContext, который представляет контекст отрисовки

• layoutDirection: направление отрисовки в виде объекта LayoutDirection

• size: размер поверхности рисования в виде объекта Size

DrawScope также предоставляет функции для рисования фигур и управления графикой. Отмечу только основные из них:

• drawArc(): отрисовывает дугу

• drawCircle(): отрисовывает круг

• drawImage(): выводит изображение

• drawLine(): рисует линию

• drawOval(): отрисовывает овал

• drawPath(): отрисовывает геометрический путь

• drawPoints(): отрисовывает последовательность точек

• drawRect(): рисует прямоугольник

• drawRoundRect(): рисует прямоугольник с закругленными углами

• drawOutline(): отрисовывает контур

• drawText(): выводит текст

• clipPath(): вырезает путь

• clipRect(): вырезает прямоугольник

• rotate(): применяет поворот

• scale(): применяет масштабирование

• translate(): применяет перемещение

Свойства и функции DrawScope мы можем использовать внутри лямбда-выражения из последнего параметра Canvas. Например, получим ширину и высоту Canvas:

Canvas(Modifier.size(300.dp).background(Color.LightGray)) {
    val height = size.height
    val width = size.width
}

В следущих статьях мы рассмотрим применение функций DrawScope для отрисвки и управления графикой.