Android Jetpack Compose UI/Compose Canvas

[Compose Canvas] Path란 무엇인가?

Path 란 무엇인가?

Path는 직선이나 곡선 등의 기하학적인 경로들을 캡슐화하는 클래스이다. Path는 내부에 그려지는 직선 혹은 곡선 정보 등을 포함할 수 있다.

 

예를 들어 (100, 100) 지점에서 시작하는 200px 크기의 정사각형은 다음과 같이 그릴 수 있다.

val path = Path().apply {
    moveTo(100.dp.toPx(), 100.dp.toPx()) // 시작 지점 옮기기
    lineTo(100.dp.toPx(), 300.dp.toPx())
    lineTo(300.dp.toPx(), 300.dp.toPx())
    lineTo(300.dp.toPx(), 100.dp.toPx())
    lineTo(100.dp.toPx(), 100.dp.toPx())
}

1. 먼저 (100f, 100f) 좌표로 기준점을 옮긴다.

2. 직선을 추가하는 함수 lineTo를 사용해 (100, 100)부터 (100, 300)까지 직선을 추가한다. 기준점은 (100, 300)로 옮겨진다.

3. lineTo 함수를 사용해 (100, 300)으로부터 (300, 300)으로 직선을 추가한다. 기준점은 (300, 300)로 옮겨진다. 

4. lineTo 함수를 사용해 (300, 300)지점으로부터 (300, 100)지점까지 직선을 추가한다. 기준점은 (300, 100)로 옮겨진다.

5. lineTo 함수를 사용해 (300,100)부터 (100, 100)지점까지 직선을 추가한다. 기준점은 (100, 100)로 옮겨진다.

 

이렇게 하면 이 Path에는 (100, 100) 지점에서 시작하는 200dp 크기의 정사각형이 생긴다.

 

drawPath사용해 Path 그리기

drawPath를 사용하면, Path를 캔버스 상에 그릴 수 있다. 위에서 만든 Path 정보를 사용해 캔버스에 Path를 그려보자.

@Preview(widthDp = 400, heightDp = 400)
@Composable
fun DrawRectWithPath() {
    Canvas(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White),
        onDraw = {
            val path = Path().apply {
                moveTo(100.dp.toPx(), 100.dp.toPx()) // 시작 지점 옮기기
                lineTo(100.dp.toPx(), 300.dp.toPx())
                lineTo(300.dp.toPx(), 300.dp.toPx())
                lineTo(300.dp.toPx(), 100.dp.toPx())
                lineTo(100.dp.toPx(), 100.dp.toPx())
            }

            drawPath(
                path = path,
                color = Color.Blue,
            )
        }
    )
}

 

그러면 다음과 같은 화면이 나오는 것을 볼 수 있다.

그림1. drawPath 그림

 

Path의 모서리만 그리기

만약 채워지지 않게 그리고 싶으면 이전에 배운 것과 같이 같이 drawPath의 style로 Stroke을 넘기면 된다.

@Composable
fun DrawRectWithPath() {
    Canvas(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White),
        onDraw = {
            val path = Path().apply {
                moveTo(100f, 100f) // 시작 지점 옮기기
                lineTo(100f, 300f)
                lineTo(300f, 300f)
                lineTo(300f, 100f)
                lineTo(100f, 100f)
            }

            drawPath(
                path = path,
                color = Color.Blue,
                style = Stroke(width = 3.dp.toPx(), cap = StrokeCap.Square)
            )
        }
    )
}

 

그러면 모서리만 그려지는 것을 볼 수 있다.

 

반응형

 

이 글의 저작권은 Dev World 에 있습니다. 글, 이미지 무단 재배포 및 변경을 금지합니다.

 

 

Kotlin, Android, Spring 사용자 오픈 카톡

오셔서 궁금한 점을 질문해보세요!
비밀번호 : kotlin22

open.kakao.com