Canvas

Предоставляет интерфейс для работы с 2D-графикой, который позволяет напрямую рисовать на экране.

Canvas(
    modifier = Modifier.size(100.dp)
) {
    drawCircle(Color.Red)
}

Функция в DrawScope, которая рисует линию на Canvas.

Canvas(
    modifier = Modifier.fillMaxWidth(fraction = 0.8F)
) {
    drawLine(
        color = Color.Black,
        start = Offset(0F, 0F),
        end = Offset(size.width, 0F),
        strokeWidth = 20F,
        cap = StrokeCap.Round
    )
}

• brush градиент или текстура линии.

• color цвет линии.

• start координаты начальной точки (Offset).

• end координаты конечной точки (Offset).

• strokeWidth толщина линии в пикселях.

• cap стиль концов линии (например, Butt, Round, Square).

• pathEffect дополнительные эффекты (например, пунктир).

• alpha прозрачность линии (от 0F до 1F, где 1F — полностью непрозрачный).

• colorFilter наложение фильтра на цвет линии.

• blendMode режим наложения цвета (например, SrcOver, DstOver, Multiply).

Preview

Функция в DrawScope, которая рисует прямоугольник на Canvas.

Canvas(
    modifier = Modifier.size(200.dp)
) {
    drawRect(
        color = Color.Black,
        size = Size(200.dp.toPx(), 100.dp.toPx())
    )
}

• brush градиент или текстура прямоугольника.

• color цвет прямоугольника.

• topLeft начальная позиция верхнего левого угла (Offset).

• size размеры прямоугольника (Size), ширина и высота.

• alpha прозрачность прямоугольника (от 0F до 1F, где 1F — полностью непрозрачный).

• style стиль заливки (Fill для заполнения или Stroke для контура).

• colorFilter наложение фильтра на цвет прямоугольника.

• blendMode режим наложения цвета (например, SrcOver, DstOver, Multiply).

Preview

Функция в DrawScope, которая рисует прямоугольник с закругленными углами на Canvas.

Canvas(
    modifier = Modifier.size(200.dp)
) {
    drawRoundRect(
        color = Color.Black,
        size = Size(200.dp.toPx(), 100.dp.toPx()),
        cornerRadius = CornerRadius(16.dp.toPx(), 16.dp.toPx())
    )
}

• brush градиент или текстура прямоугольника.

• color цвет прямоугольника.

• topLeft начальная позиция верхнего левого угла (Offset).

• size размеры прямоугольника (Size), ширина и высота.

• cornerRadius радиус закругления углов (CornerRadius), который принимает x и y значения для определения степени скругления.

• alpha прозрачность прямоугольника (от 0F до 1F, где 1F — полностью непрозрачный).

• style стиль заливки (Fill для заполнения или Stroke для контура).

• colorFilter наложение фильтра на цвет прямоугольника.

• blendMode режим наложения цвета (например, SrcOver, DstOver, Multiply).

Preview

Функция в DrawScope, которая рисует круг на Canvas.

Canvas(
    modifier = Modifier.size(100.dp)
) {
    drawCircle(
        color = Color.Black
    )
}

• brush градиент или текстура круга.

• color цвет круга.

• radius радиус круга в пикселях.

• center координаты центра круга на относительно верхнего левого угла Canvas. (Offset).

• alpha прозрачность круга (от 0F до 1F, где 1F — полностью непрозрачный).

• style может быть Fill (закрашенный круг) или Stroke (только контур). По умолчанию используется Fill.

• colorFilter наложение фильтра на цвет круга.

• blendMode режим наложения цвета (например: SrcOver, DstOver, Multiply).

Preview

Функция в DrawScope, которая рисует овал на Canvas.

Canvas(
    modifier = Modifier.size(200.dp)
) {
    drawOval(
        color = Color.Black,
        size = Size(200.dp.toPx(), 100.dp.toPx())
    )
}

• brush градиент или текстура овала.

• color цвет овала.

• topLeft начальная позиция верхнего левого угла (Offset).

• size размеры овала (Size), ширина и высота.

• alpha прозрачность овала (от 0F до 1F, где 1F — полностью непрозрачный).

• style стиль заливки (Fill для заполнения или Stroke для контура).

• colorFilter наложение фильтра на цвет овала.

• blendMode режим наложения цвета (например: SrcOver, DstOver, Multiply).

Preview

Функция в DrawScope, которая рисует дуги (сектора) окружности на Canvas.

Canvas(
    modifier = Modifier.size(200.dp)
) {
    drawArc(
        color = Color.Black,
        startAngle = 180F,
        sweepAngle = 180F,
        useCenter = false,
        topLeft = Offset((size.width - 200F) / 2, (size.height - 200F) / 2),
        size = Size(200F, 200F),
        style = Stroke(width = 20F)
    )
}

• brush градиент или текстура дуги.

• color цвет дуги.

• startAngle начальный угол дуги (в градусах), измеряется от горизонтальной оси вправо (0°) и идет по часовой стрелке.

• sweepAngle угол, на который будет растягиваться дуга (в градусах). Положительные значения рисуют по часовой стрелке, отрицательные — против.

• useCenter если true, дуга будет нарисована как сектор (замкнется к центру), если false — рисуется как открытая дуга.

• topLeft смещение верхнего левого угла ограничивающего прямоугольника, внутри которого рисуется дуга.

• size размер ограничивающего прямоугольника (Size), который определяет радиус дуги.

• alpha прозрачность дуги (от 0F до 1F, где 1F — полностью непрозрачный).

• style стиль заливки (Fill для заполнения или Stroke для контура).

• colorFilter наложение фильтра на цвет дуги.

• blendMode режим наложения цвета (например, SrcOver, DstOver, Multiply).

Preview

Функция в DrawScope, которая рисует контуры на Canvas.

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

• path объект Path, который определяет форму или траекторию, по которой рисуется контур.

• color цвет контура.

• brush градиент или текстура контура.

• alpha прозрачность контура (от 0F до 1F, где 1F — полностью непрозрачный).

• style стиль заливки (Fill для заполнения или Stroke для контура).

• colorFilter наложение фильтра на цвет контура.

• blendMode режим наложения цвета (например, SrcOver, DstOver, Multiply).

Preview

Функция в DrawScope, которая рисует множество точек на Canvas.

• points список точек (List<Offset>), где каждая точка определяет координаты (x и y) для рисования.

• pointMode режим рисования точек (PointMode.Points, PointMode.Lines, PointMode.Polygon).

• color цвет точек или линий между ними.

• brush градиент или текстура точек или линий между ними.

• strokeWidth толщина точек или линий.

• cap стиль концов линий, если pointMode установлен на Lines или Polygon. Доступные значения: Butt, Round, Square.

• pathEffect изменяет внешний вид линий или точек, добавляя эффекты, такие как пунктирные линии, узоры или волнистые линии.

• alpha прозрачность дуги (от 0F до 1F, где 1F — полностью непрозрачный).

• colorFilter наложение фильтра на цвет дуги.

• blendMode режим наложения цвета (например, SrcOver, DstOver, Multiply).

Preview

Функция в DrawScope, которая рисует изображение на Canvas.

@Composable
fun SimpleDrawImage(imageBitmap: ImageBitmap) {
    Canvas(
        modifier = Modifier.size(300.dp)
    ) {
        drawImage(
            image = imageBitmap,
            topLeft = Offset(50F, 50F),
            alpha = 0.9F
        )
    }
}

• image объект типа ImageBitmap.

• topLeft начальная позиция верхнего левого угла (Offset).

• srcOffset начальная точка обрезки в исходном изображении (IntOffset).

• srcSize размер области исходного изображения (IntSize).

• dstOffset точка, куда будет помещено изображение на Canvas (IntOffset).

• dstSize конечный размер изображения на Canvas (IntSize).

• alpha прозрачность дуги (от 0F до 1F, где 1F — полностью непрозрачный).

• style стиль заливки (Fill для заполнения или Stroke для контура).

• colorFilter наложение фильтра на цвет изображения.

• blendMode режим наложения цвета (например, SrcOver, DstOver, Multiply).

• filterQuality качество масштабирования изображени (FilterQuality).

val gradientBrush = Brush.horizontalGradient(listOf(MaterialTheme.colorScheme.red, MaterialTheme.colorScheme.blue))

Canvas(
    modifier = Modifier,
    onDraw = { drawRect(gradientBrush) }
)