Трансформации

Вращение

Любой нарисованный на Canvas элемент можно повернуть с помощью функции rotate():

fun rotate(degrees: Float, pivot: Offset = center, block: DrawScope.() -> Unit): Unit

Она принимает три параметра:

• degrees: угол поворота по часовой стрелки в виде значения Float

• pivot: точка поворота, по умолчанию представляет центр Canvas

• block: функция типа DrawScope.() -> Unit, внутри которой происходит отрисовка на повернутой плоскости

Например, повернем прямоугольник на 45°:

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.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.rotate
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Canvas(Modifier.fillMaxWidth().height(300.dp).background(Color.LightGray)) {
                rotate(45f) {
                    drawRect(
                        color = Color.Blue,
                        topLeft = Offset(200f, 200f),
                        size = size / 2f
                    )
                }
            }
        }
    }
}

Масштабирование

Для масштабирования элементов на Canvas применяется функция scale():

fun scale(scale: Float, pivot: Offset = center, block: DrawScope.() -> Unit): Unit

fun scale(
    scaleX: Float,
    scaleY: Float,
    pivot: Offset = center,
    block: DrawScope.() -> Unit
): Unit

Первая версия принимает три параметра:

• scale: коэффициент масштабирования

• pivot: точка масштабирования, по умолчанию представляет центр Canvas

• block: функция типа DrawScope.() -> Unit, внутри которой происходит отрисовка на отмасштабированной плоскости

Вторая версия позволяет задать отдельные коэффициенты для масштабирования по оси 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.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.graphics.drawscope.scale

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Canvas(Modifier.fillMaxWidth().height(300.dp).background(Color.LightGray)) {
                scale(1.5f) {
                    drawRect(
                        color = Color.Blue,
                        topLeft = Offset(260f, 200f),
                        size = size / 2f
                    )
                }
                drawRect(
                    color = Color.DarkGray,
                    topLeft = Offset(260f, 200f),
                    size = size / 2f
                )
            }
        }
    }
}

В данном случае темно-сервым цветом отображен прямоугольник с оригинальными размерами, а синим цветом - с отмасштабированными размерами:

Перемещение

Функция translate() позволяет переместить сцену на определенное количество пикселей по горизонтали и/или вертикали:

fun translate(left: Float = 0.0f, top: Float = 0.0f, block: DrawScope.() -> Unit): Unit

Функция принимает три параметра:

• left: перемещение в пикселях по горизонтали

• top: перемещение в пикселях по вертикали

• block: функция типа DrawScope.() -> Unit, внутри которой происходит отрисовка на перещенной плоскости

Например, повернем прямоугольник на 45°:

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.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.graphics.drawscope.translate

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Canvas(Modifier.fillMaxWidth().height(300.dp).background(Color.LightGray)) {
                drawRect(
                    color = Color.DarkGray,
                    topLeft = Offset(60f, 60f),
                    size = size / 2f
                )
                translate(250f, 150f) {
                    drawRect(
                        color = Color.Blue,
                        topLeft = Offset(60f, 60f),
                        alpha = 0.5f,
                        size = size / 2f
                    )
                }
            }
        }
    }
}

Здесь происходит сдвиг прямоугольника на 250 пикселей по горизонтали и на 150 пикселей по вертикали. Для наглядности темно-серый прямоугольник представляет оригинальное положение, а синий прямоугольник - положение после сдвига: