[Compose Canvas] Canvas drawArc 사용해 부채꼴과 호 그리는 방법 한 번에 정리하기

이번 글에서 다룰 내용

이번 글에서는 drawArc 사용법에 대해 다룬다. Arc는 호라는 뜻이고, drawArc를 사용하면 부채꼴과 혹은 호와 현을 합친 도형을 그릴 수 있다.

 

예를 들어 아래와 같은 부채꼴 모양을 그리거나

 

혹은 아래와 같은 호와 현이 합쳐진 모양을 그릴 수도 있다.

 

이런 모양들은 시계, 체중계, 등 진행도가 필요한 곳에 자주 사용된다. 자 이제 drawArc 사용법에 대해 알아보도록 하자.

 

 

drawArc 함수 알아보기

drawArc는 color, startAngle, sweepAngle, useCenter, topLeft, size, alpha, style, colorFilter, blendMode의 파라미터를 가지며, 이 중 drawArc에서 모양을 만들기 위해 사용되는 파라미터는 startAngle, sweepAngle, useCenter이다.

fun drawArc(
    color: Color,
    startAngle: Float,
    sweepAngle: Float,
    useCenter: Boolean,
    topLeft: Offset = Offset.Zero,
    size: Size = this.size.offsetSize(topLeft),
    /*@FloatRange(from = 0.0, to = 1.0)*/
    alpha: Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
)

 

startAngle은 호의 시작 지점을 나타내며, sweepAngle은 몇도 만큼이나 호를 그릴 것인지를 나타낸다. 

 

startAngle은 특이하게 맨 오른쪽을 0도로 하고 아래를 90도 왼쪽을 180도 위를 270도로 한다. 따라서 오른쪽을 시작 지점으로 하려면 0도로 해야 한다. 여기서 270도만큼의 부채꼴을 그리려면 다음과 같이 코드를 작성할 수 있다.

@Preview(showBackground = true)
@Composable
fun DrawArc() {
    Canvas(
        modifier = Modifier
            .size(300.dp)
            .background(Color.White),
        onDraw = {
            drawArc(
                color = Color.Blue,
                startAngle = 0f,
                sweepAngle = 270f,
                useCenter = true,
                topLeft = Offset(50.dp.toPx(), 50.dp.toPx()),
                size = Size(200.dp.toPx(), 200.dp.toPx())
            )
        }
    )
}

 

그러면 다음과 같은 부채꼴 모양이 나온다. 오른쪽을 0도로 해서 270도가 회전된 만큼의 부채꼴을 볼 수 있다.

 

만약 180도만큼만 그려 반원을 그린다고 하면 코드는 다음과 같아지고

@Preview(showBackground = true)
@Composable
fun DrawArc() {
    Canvas(
        modifier = Modifier
            .size(300.dp)
            .background(Color.White),
        onDraw = {
            drawArc(
                color = Color.Blue,
                startAngle = 0f,
                sweepAngle = 180f,
                useCenter = true,
                topLeft = Offset(50.dp.toPx(), 50.dp.toPx()),
                size = Size(200.dp.toPx(), 200.dp.toPx())
            )
        }
    )
}

 

도형은 다음과 같아진다.

 

useCenter 조정해보기

useCenter은 중심점을 사용할 것인지 말것인지를 결정하기 위한 인자이다. useCenter=true로 설정되어 중심점이 사용되면 위에서 다룬 것과 같은 모양이 나오며, 만약 중심점을 사용하지 않으면 도형의 모양이 달라진다. 한 번 useCenter = false로 설정해보자.

 

@Preview(showBackground = true)
@Composable
fun DrawArc() {
    Canvas(
        modifier = Modifier
            .size(300.dp)
            .background(Color.White),
        onDraw = {
            drawArc(
                color = Color.Blue,
                startAngle = 0f,
                sweepAngle = 270f,
                useCenter = false,
                topLeft = Offset(50.dp.toPx(), 50.dp.toPx()),
                size = Size(200.dp.toPx(), 200.dp.toPx())
            )
        }
    )
}

 

그러면 중심점과 호의 시작점과 끝점이 연결되지 않아 아래와 같은 도형이 나온다.

 

 

drawArc 정리

 위에서는 drawArc에서 도형을 그리기 위해 가장 중요한 startAngle, sweepAngle, useCenter에 대해 다루었다. 각각의 파라미터가 무슨 역할을 하는지 알면 drawrArc를 사용해 자유자재로 부채꼴 모양이나 호와 현을 잇는 모양을 만들 수 있다.