[Compose Canvas] Canvas drawCircle 사용해 원 만드는 방법 한 번에 정리하기

이번 글에서 다룰 내용

이번 글에서는 drawCircle 사용법에 대해 다룬다. drawCircle 또한 Color을 사용하는 drawCircle 함수와 Brush를 사용하는 drawCircle이 있는데, Brush 사용법은 이전 글 drawRect에서 다룬 것과 동일하므로 Color을 사용하는 drawCircle만 다루도록 한다.

 

drawCircle 함수 살펴보기

drawCircle은 color, radius, center, alpha, style, colorFilter, blendMode를 파라미터로 받는다.

fun drawCircle(
    color: Color,
    radius: Float = size.minDimension / 2.0f,
    center: Offset = this.center,
    /*@FloatRange(from = 0.0, to = 1.0)*/
    alpha: Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
)

각 파라미터는 다음의 역할을 한다.

• color: 원의 색상을 결정
• radius: 원의 반지름을 설정
• center: 원의 중간점을 설정

*alpha, style, colorFilter, blendMode는 이전 글에서 다룬 drawRect와 동일하므로 설명을 생략한다. 

 

 

왼쪽 위 꼭지점이 기준점이 되는 사각형과 다르게, 원은 center이 기준점이 되고, 해당 기준점으로부터의 반지름의 크기만큼 원으로 그려진다.

 

drawCircle 함수 사용해보기

300dp 크기의 Canvas의 중간 지점에 drawCircle을 사용해 100dp의 반지름을 가진 파란색 원을 그린다고 해보자. Canvas의 중간지점은 (150dp, 150dp)이므로, drawCircle의 center을 해당 지점으로 설정하면 된다. 반지름은 100dp이므로, radius에는 100dp를 넘겨주면 된다.

 

이를 완성하면 다음과 같은 코드가 된다. 

@Preview(showBackground = true)
@Composable
fun DrawCircle() {
    Canvas(
        modifier = Modifier
            .size(300.dp)
            .background(Color.White),
        onDraw = {
            drawCircle(
                color = Color.Blue,
                radius = 100.dp.toPx(),
                center = Offset(150.dp.toPx(), 150.dp.toPx())
            )
        }
    )
}

color에는 Color.Blue를 넘겨서 파란색으로 설정하고, 반지름은 100dp로 설정 하고, 중간점은 (150dp,150dp)로 설정된다.

 

이에 대한 Preview는 다음과 같은 모양이 되는 것을 확인할 수 있다. 캔버스 중간에 원이 그려지는 것을 볼 수 있다.

 

 

drawCircle 정리

drawRect는 왼쪽 위 꼭지점이 도형을 그리기 위한 기준점이었는데, drawCircle은 중심점이 도형을 그리기 위한 기준점이다. 이는 각 도형이 가진 특징 때문인데, 각 도형을 그리기 위한 기준점을 다르다는 것을 이해하고 이후 다룰 도형들이 어떤 기준점을 가지는지를 생각하며 다루도록 하자.

또한 도형을 그리는 것은 도형을 그리는 기준점과 그리는 방식 말고는 도형을 구성하는 요소가 같기 때문에 공통적으로 alpha, style, colorFilter, blendMode를 가지고 있다. 어떤 도형에서든지 이 파라미터들을 사용할 수 있음을 기억하자.