반응형
Stroke의 cap 프로퍼티는 무엇을 하는가?
Canvas를 다루면서 수많은 선과, 경로를 만들어낸다. 선과 경로를 만들어내는 것까지는 좋은데, 해당 선과 경로는 생각보다 아름답지 않다. 예를 들어 아래와 같은 코드를 만들어보자.
@Preview(widthDp = 400, heightDp = 600)
@Composable
fun DrawCap() {
Canvas(
modifier = Modifier
.fillMaxSize()
.background(Color.White),
onDraw = {
val path = Path().apply {
moveTo(100.dp.toPx(), 100.dp.toPx()) // 시작점 변경
lineTo(200.dp.toPx(), 500.dp.toPx()) // (100, 100)에서 (200, 500)으로 직선 연결
lineTo(300.dp.toPx(), 100.dp.toPx()) // (200, 500)에서 (300, 100)으로 직선 연결
}
drawPath(
path = path,
color = Color.Red,
style = Stroke(
width = 10.dp.toPx()
)
)
}
)
}
그러면 이 코드는 다음과 같이 생겼다.
양 끝을 보면 완전히 직사각형 모양으로 잘린 형태이다. 이것이 이렇게 나오는 이유는 바로 Stroke의 cap이 기본값으로 StrokeCap.Butt으로 설정되어 있기 때문이다. StrokeCap.Butt은 양 끝을 평평하게 만들기 때문에 위와 같은 모양이 나오는 것이다.
StrokeCap.Round 사용해 양끝 둥글게 처리하기
양 끝을 둥글게 처리하기 위해서는 StrokeCap.Round를 사용할 수 있다. 예를 들어 아래와 같이 cap을 StrokeCap.Round로 만들면 양 끝이 둥글게 처리되어 있는 것을 확인할 수 있다.
@Preview(widthDp = 400, heightDp = 600)
@Composable
fun DrawCap() {
Canvas(
modifier = Modifier
.fillMaxSize()
.background(Color.White),
onDraw = {
val path = Path().apply {
moveTo(100.dp.toPx(), 100.dp.toPx()) // 시작점 변경
lineTo(200.dp.toPx(), 500.dp.toPx()) // (100, 100)에서 (200, 500)으로 직선 연결
lineTo(300.dp.toPx(), 100.dp.toPx()) // (200, 500)에서 (300, 100)으로 직선 연결
}
drawPath(
path = path,
color = Color.Red,
style = Stroke(
width = 10.dp.toPx(),
cap = StrokeCap.Round // Path가 close()되지 않을 때 양끝의 모양을 결정
)
)
}
)
}확인해보면 양 끝이 둥글게 처리된 것을 확인할 수 있다.
이런 방식으로 양 끝을 처리하는 방식을 결정 할 수 있다.
반응형
