[Compose Canvas] rotateRad 사용해 캔버스에 그려진 도형 회전하기

rotateRad 사용해 Canvas 회전시키기

Canvas에서 특정 도형을 회전시키기 위해서는 rotateRad 함수를 사용하면 된다.

inline fun DrawScope.rotateRad(
    radians: Float,
    pivot: Offset = center,
    block: DrawScope.() -> Unit
) {
    withTransform({ rotate(degrees(radians), pivot) }, block)
}

rotateRad는 인자로 radians를 받아 회전 각도를 결정하며 pivot은 회전 중심점이다. block에는 회전 시킬 도형이나 텍스트를 넣으면 된다. 

 

자 각각에 대해 알아보자.

 

radians: 회전 시킬 각도를 결정

일반적으로 우리는 '도'라 불리는 단위로 회전 각도를 결정한다. 하지만, rotateRad는 인자로 radians라는 단위를 가진다. radians는 '도'와 다음과 같은 관계를 가진다.

1 rad = (180 / π) 도

 

즉, 우리가 사용하는 도를 radians로 변환시키기 위해서는 다음과 같은 계산식을 사용해야 한다. 우리가 x도 만큼 회전을 원한다면 이에 대한 radians 값은 다음과 같다.

(x * π) / 180

 

예를 들어 우리가 90도를 radians로 표현하고자 한다면 다음의 값이 rad 값이 된다.

(90 * π) / 180

 

이를 Kotlin으로 표현하면 다음과 같다.

(90 * PI.toFloat()) / 180

 

pivot: 회전 중심점을 결정

pivot은 회전 중심점이다. 회전 중심점은 기본적으로 DrawScope의 center로 설정되어 있어 중심점이 회전 중심점이 된다. Offset을 변화시킴으로써 회전 중심점을 변화시킬 수 있다.

 

rotateRad 사용해보기

rotateRad를 사용해 정사각형을 다이아몬드 모양으로 바꿔보도록 하자. 

 

먼저 다음과 같은 방식으로 정사각형을 그릴 수 있다.

@Preview(showBackground = true)
@Composable
fun DrawRect() {
    Canvas(
        modifier = Modifier
            .size(300.dp)
            .background(Color.White),
        onDraw = {
            drawRect(
                color = Color.Blue,
                topLeft = Offset(100.dp.toPx(), 100.dp.toPx()),
                size = Size(100.dp.toPx(), 100.dp.toPx())
            )
        }
    )
}

 

 

여기에 rotateRad를 사용해 45도 회전을 주게 되면 정사각형이 다이아몬드 모양으로 바뀌는 것을 볼 수 있다.

@Preview(showBackground = true)
@Composable
fun DrawRect() {
    Canvas(
        modifier = Modifier
            .size(300.dp)
            .background(Color.White),
        onDraw = {
            rotateRad((45 * Math.PI.toFloat()) / 180) {
                drawRect(
                    color = Color.Blue,
                    topLeft = Offset(100.dp.toPx(), 100.dp.toPx()),
                    size = Size(100.dp.toPx(), 100.dp.toPx())
                )
            }
        }
    )
}