Отрисовка прямоугольников

Для отрисовки прямоугольников применяется функция drawRect():

fun drawRect(
    color: Color,
    topLeft: Offset = Offset.Zero,
    size: Size = this.size.offsetSize(topLeft),
    alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
): Unit

Она имеет следующие параметры:

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

• topLeft: точка верхнего левого угла (значение типа Offset)

• size: размер прямоугольника

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

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

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

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

Пример прямоугольника:

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.geometry.Size

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Canvas(Modifier.size(300.dp).background(Color.LightGray)) {
                val size = Size(700f, 300f)
                drawRect(
                    color = Color.Blue,
                    size = size
                )
            }
        }
    }
}

Обратите внимание, что в примере выше размеры Canvas составляют 300 x 300, а размер прямоугольника — 700 x 300, и как в случае с отрисовкой линий, которая рассматривалась в прошлой статье, для отрисовки прямоугольников применяются обычные пиксели px

Вместо указания размеров размер прямоугольника также можно определить относительно размера Canvas. Например, следующий код рисует квадрат размером в половину размера Canvas:

Canvas(Modifier.size(300.dp).background(Color.LightGray)) {
    drawRect(
        color = Color.Blue,
        size = size / 2f
    )
}

Начальная позиция

Начальная позиция прямоугольника определяется с помощью координат верхнего левого угла через параметр topLeft:

import androidx.compose.ui.geometry.Offset
.......................

Canvas(Modifier.size(300.dp).background(Color.LightGray)) {
    drawRect(
        color = Color.Blue,
        size = size / 2f,
        topLeft = Offset(x=350f, y = 300f),
    )
}

В качестве альтернативы можно использовать функцию inset() для изменения границ внутри Canvas:

inline fun DrawScope.inset(inset: Float, block: DrawScope.() -> Unit): Unit

inline fun DrawScope.inset(
    horizontal: Float = 0.0f,
    vertical: Float = 0.0f,
    block: DrawScope.() -> Unit
): Unit

inline fun DrawScope.inset(
    left: Float,
    top: Float,
    right: Float,
    bottom: Float,
    block: DrawScope.() -> Unit
): Unit

Первая версия принимает общий отступ в пикселях со всех четырех сторон. Вторая версия устанавливает отдельные отступы по горизонтали и вертикали. И третья версия устанавливает отдельные отступы от каждой из четырех сторон. Например:

import androidx.compose.ui.graphics.drawscope.inset
.............................................

Canvas(Modifier.size(300.dp).background(Color.LightGray)) {
    inset(350f, 300f, 0f, 0f) {
        drawRect(
            color = Color.Blue,
            size = size / 2f
        )
    }
}

Заполнение прямоугольника

Параметр style отвечает за то, как цвет заполняет прямоугольник. Он представляет объект класса DrawStyle. По умолчанию применяется объект Fill, который заполняет цветом всю площадь фигуры. Но в качестве альтернативы мы также можем использовать подкласс Stroke, который отрисовывает только границу фигуры, не заполняя ее содержимого.

Класс Stroke имеет следущий конструктор:

Stroke(
    width: Float,
    miter: Float,
    cap: StrokeCap,
    join: StrokeJoin,
    pathEffect: PathEffect?
)

Его параметры:

• cap: устанавливает тип начала и конца линий

• join: устанавливает тип соединения линии

• miter: устанавливает форму для соединения линий линий

• pathEffect: устанавливает тип линии

• width: устанавливает ширину линии в пикселях

Например, зададим для прямоугольника только контур в 3.dp без заливки:

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.geometry.Offset
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)) {
                drawRect(
                    color = Color.Blue,
                    size = size / 2f,
                    topLeft = Offset(x=150f, y = 200f),
                    style = Stroke(width = 3.dp.toPx()),
                )
            }
        }
    }
}

Прямоугольник с округленными углами

Аналогично мы можем рисовать прямоугольники с закругленными углами. Для этого применяется функция drawRoundRect()

fun drawRoundRect(
    color: Color,
    topLeft: Offset = Offset.Zero,
    size: Size = this.size.offsetSize(topLeft),
    cornerRadius: CornerRadius = CornerRadius.Zero,
    style: DrawStyle = Fill,
    alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
): Unit

Эта функция принимает все те же параметры, что и drawRoundRect() за тем исключением, что здесь добавляется параметр cornerRadius, который задает радиус закругления углов в виде объекта CornerRadius. Для его создания может применяться одноименная функция:

fun CornerRadius(x: Float, y: Float = x): CornerRadius

В качестве параметров она принимает значения радиуса по оси x и y.

Простейший пример создания закругленного прямоугольника:

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.geometry.CornerRadius
import androidx.compose.ui.geometry.Offset

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Canvas(Modifier.size(300.dp).background(Color.LightGray)) {
                drawRoundRect(
                    color = Color.Blue,
                    size = size / 2f,
                    topLeft = Offset(x=350f, y = 300f),
                    cornerRadius = CornerRadius(
                        x = 30.dp.toPx(),
                        y = 30.dp.toPx()
                    )
                )
            }
        }
    }
}