Canvas

Compose에서는 Canvas() 컴포저블 함수를 이용해 도형을 그린다.
Canvas에는 필수적으로 크기와 onDraw를 설정해줘야 한다.

image

  • 크기를 임의로 지정할 때

    Canvas(modifier = Modifier.size(300.dp)) {
      drawCircle(color = Color.Blue)
}

  • 화면너비에 최대로 맞추고 비율을 설정해서 크기를 지정할 떄

    Canvas(modifier = Modifier.fillMaxWidth().aspectRatio(1f)) {
      drawCircle(color = Color.Blue)
}

좌표계

Canvas에서 좌표계는 좌측 상단 (0,0)에서 시작해 오른쪽으로 갈 수록 x좌표가 증가, 하단으로 갈 수록 y좌표가 증가하는 특징을 갖고 있다.

image


Tip 💡
단위를 dp에서 px로 바꿔야할 경우 8.dp.toPx()처럼 toPx() 함수를 사용하면된다.

onDraw에는 원하는 도형을 입맛에 맞게 그리고 배치하면 된다. 이번 포스팅에서는 Circle을 그려보자.

drawCircle

원을 그리는 컴포저블 함수이다.

image

color는 원의 색을 칠하고
radius는 원의 반지름
center는 원의 중심
alpha는 color의 투명도
style을 통해 선만 그려져있는 원을 만들 수 있다.

size

Canvas()에서 modifier로 설정한 크기가 DrawScope{}에서 사용하는 size의 값이다. 아래의 코드에서는 Modifier.size(300.dp)로 설정했기 때문에 drawCircle()에서 사용하는 size의 값은 300dp 이다. radius는 반지름이기에 size.width/2를 해야지 화면에 꽉차게 된다.

Canvas(modifier = Modifier.size(300.dp)) {
    drawCircle(color = Color.Blue, radius = size.width/2, alpha = 0.5f, center = center)
}

빨간색으로 그어진 선의 크기가 size(300.dp)의 값을 나타낸다. image

center

center는 원의 중심을 나타낸다. 아래의 예시를 보면 보다 이해하기 쉬울 것이다.
center는 size의 중간 크기로 지정되어있다. size와 마찬가지로 drawCircle()에서 제공하고 있다. 여기서는 Offset(150.dp, 150.dp)로 설정되어있고, Canvas() 컴포저블의 좌측 상단 끝이 Offset(0f, 0f)이다.

Canvas(modifier = Modifier.size(300.dp)) {
    drawCircle(
        color = Color.Blue,
        radius = size.width / 2,
        alpha = 0.5f,
        center = center // 1번 그림이 center 2번 그림이 Offset(0f, 0f)
    )
}

첫 번째 그림은 center의 값이 center, 즉 Offeset(150.dp, 150.dp)인 경우
두 번쨰 그림은 center의 값이 Offest(0.dp, 0.dp)인 경우 이다. image

style 변경

drawCircle()의 style 매개변수로 기호에 맞게 원을 사용할 수 있다. 보통 Stroke() 컴포저블 함수를 많이 사용한다.

Canvas(modifier = Modifier.size(300.dp)) {
    drawCircle(
        color = Color.Blue,
        radius = size.width / 2,
        alpha = 0.5f,
        center = center,
        style = Stroke(width = 8.dp.toPx())
    )
}

image

Reference

Compose canvas Circle

참고