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,
)
}
)
}
그러면 다음과 같은 화면이 나오는 것을 볼 수 있다.
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)
)
}
)
}
그러면 모서리만 그려지는 것을 볼 수 있다.
