drawArc

drawArc()를 이용해서 아래의 사진처럼 호나 부채꼴을 만들 수 있다.

image

drawArc()에서 color, startAngle, sweepAngle, useCenter를 필수적으로 작성해야하는 매개변수이다.

image

color는 색상을 설정
startAngle은 호의 시작 각도를 설정
sweepAngle 몇 도만큼 호를 그리게 될지 설정
useCenter를 원의 중심을 이을지 말지 설정(부채꼴을 만들 수 있음)
topLeft은 호가 그려지는 영역의 위치이다. (drawArc()의 center와는 다르다는 점을 알아두자.)
style을 통해 선으로 된 호 or 부채꼴을 만들 수 있다.

startAngle

startAngle은 호의 시작 각도로 0f는 3시 방향이다. 당연히 180f는 9시 방향이다. 아래의 사진으로 이해해보자. sweepAngle = 90f를 기준으로 설명해보겠다.

image

sweepAngle

startAngle로 설정된 시작 각도를 기준으로 얼마만큼의 호를 그릴지 결정하게된다.

  • startAngle = 0f 기준 image

    좌측 사진은 45도 만큼 부채꼴 모양을 그렸고 우측 사진은 180도 만큼 부채꼴 모양을 그렸다.

useCenter

useCenter는 호를 원의 중심과 연결시켜 부채꼴모양으로 만들지 설정한다. 그림으로 보면 이해가 쉬울 것이다.

image

오른쪽 그림이 원의 중심과 연결된 부채꼴 모양 왼쪽 그림이 원의 줌심과 연결되지 않은 호 모양이다.

topLeft

부채꼴의 영역의 시작 좌표를 나타낸다. drawCircle()은 원의 중심을 중심으로 좌표를 나타내기 때문엗 다르다는 점을 참고하자. 먼저 drawArc() 좌표와 drawCircle() 차이를 이해해보자.

  • drawArc()과 drawCircle() 차이 image

    마지막 4번 째 그림은 이해를 돕기위해 임의로 점선으로 영역을 표현했다.
    drawArc()은 좌측상단으로부터 호 or 부채꼴을 그릴 수 있는 공간을 갖고 drawCircle()는 원의 중앙으로부터 원을 그릴 수 있는 공간을 갖는다.


❗️ 만약 아래의 코드와 같이 Canvas()의 Modifier.size가 300.dp 라고 해보자.

Canvas(modifier = Modifier.size(300.dp)) {
    drawArc(
        color = Color.Blue,
        startAngle = 0f,
        sweepAngle = 360f,
        useCenter = true,
        alpha = 0.5f,
        topLeft = center  // Offset(150.dp, 150.dp)
    )
}

그렇다면 topLeft = center와 topLeft = Offset(150f, 150f)는 같아야 할 것이다. 하지만 직접 입력해봤을 떄 우리가 예상한 결과가 나오지 않는다.

image


위와 같은 오류를 해결하기 위해서는 Offset(150.dp.toPx(),150.dp.toPx()) 150.dp를 Px(픽셀)로 변환해주면 된다. 그러면 center와 같은 형태를 볼 수 있다.

image

style

Canvas(modifier = Modifier.size(300.dp)) {
    drawArc(
        color = Color.Blue,
        startAngle = 120f,
        sweepAngle = 300f,
        useCenter = false,
        alpha = 0.5f,
        topLeft = Offset(0f, 0f),
        style = Stroke(width = 10f)
    )
}

Stoke() 컴포저블 함수를 이용해서 style을 적용시켜주면 아래와 같은 이미지를 얻을 수 있다.

image

응용해서 만드는 이미지

Canvas(modifier = Modifier.size(300.dp)) {
        drawArc(
        color = Color.LightGray,
        startAngle = 120f,
        sweepAngle = 300f,
        useCenter = false,
        topLeft = Offset(size.width * 0.2f, size.height * 0.2f),
        size = Size(size.width * 0.6f, size.height * 0.6f),
        style = Stroke(width = 70f, cap = StrokeCap.Round)
    )
    drawArc(
        color = Color.Blue,
        startAngle = 120f,
        sweepAngle = 120f,
        useCenter = false,
        alpha = 0.3f,
        topLeft = Offset(size.width * 0.2f, size.height * 0.2f),
        size = Size(size.width * 0.6f, size.height * 0.6f),
        style = Stroke(width = 70f, cap = StrokeCap.Round)
    )
}


image

Reference

Jetpack Compose Canvas 1
Jetpack Compose Canvas 2
응용한 drawArc()

참고