Для отрисовки прямоугольников применяется функция 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() ) ) } } } }