[Compose Canvas] drawLine 사용해 직선 그리는 방법 한 번에 정리하기

직선의 구성

직선은 시작점과 끝점 그리고 선의 굵기로 이루어진다.

 

Compose의 Canvas에서도 같은 방식으로 직선이 그려진다. 자 어떻게 Canvas에서 직선을 그릴 수 있는지 살펴보도록 하자.

 

 

drawLine 함수

Canvas에서는 drawLine 함수를 사용해 직선을 그릴 수 있다.

fun drawLine(
    color: Color,
    start: Offset,
    end: Offset,
    strokeWidth: Float = Stroke.HairlineWidth,
    cap: StrokeCap = Stroke.DefaultCap,
    pathEffect: PathEffect? = null,
    /*FloatRange(from = 0.0, to = 1.0)*/
    alpha: Float = 1.0f,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
)

 

start는 시작점이고, end는 끝점이다. strokeWidth는 선의 굵기이다. 이 세가지 속성을 사용하면 선을 그릴 수 있다. 예를 들어 시작점이 (100dp, 100dp)이고, 끝점이 (200dp, 100dp), 굵기가 10dp인 직선을 그려보도록 하자. 이는 다음과 같이 그릴 수 있다.

@Preview(showBackground = true)
@Composable
fun DrawLine() {
    Canvas(
        modifier = Modifier
            .size(300.dp)
            .background(Color.White),
        onDraw = {
            drawLine(
                color = Color.Blue,
                start = Offset(100.dp.toPx(),100.dp.toPx()),
                end = Offset(200.dp.toPx(),100.dp.toPx()),
                strokeWidth = 10.dp.toPx()
            )
        }
    )
}

 

이 코드는 다음의 직선을 만든다.

 

drawLine의 cap 파라미터 사용해 선 양끝의 모양 바꾸기

위 선은 이쁘지 않다. 양 끝이 너무 직각으로 되어 있기 때문이다. 이를 drawLine의 cap 파라미터를 바꿈으로써 변경 가능하다. 예를 들어 선 양끝에 라운딩 처리를 하고 싶으면 아래와 같이 cap에 StrokeCap.Round를 넘기면 된다.

@Preview(showBackground = true)
@Composable
fun DrawLine() {
    Canvas(
        modifier = Modifier
            .size(300.dp)
            .background(Color.White),
        onDraw = {
            drawLine(
                color = Color.Blue,
                start = Offset(100.dp.toPx(),100.dp.toPx()),
                end = Offset(200.dp.toPx(),100.dp.toPx()),
                strokeWidth = 10.dp.toPx(),
                cap = StrokeCap.Round
            )
        }
    )
}

 

그러면 선에 라운딩 처리가 되는 것을 확인할 수 있다.

 

pathEffect 사용해 선에 효과 부여하기

pathEffect를 사용하면 선을 점선으로 만들거나 스탬프 처리와 같은 효과를 부여할 수도 있다. 예를 들어 아래와 같이 PathEffect.dashPathEffect를 사용하면 선을 점선으로 만들 수 있다. 

@Preview(showBackground = true)
@Composable
fun DrawLine() {
    Canvas(
        modifier = Modifier
            .size(300.dp)
            .background(Color.White),
        onDraw = {
            drawLine(
                color = Color.Blue,
                start = Offset(100.dp.toPx(), 100.dp.toPx()),
                end = Offset(200.dp.toPx(), 100.dp.toPx()),
                strokeWidth = 10.dp.toPx(),
                cap = StrokeCap.Round,
                pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 40f), 10f)
            )
        }
    )
}

 

위 코드는 선을 아래와 같이 점선으로 만든다. 잘 보이게 하기 위해 간격을 널찍하게 만들었다.

 

drawLine 정리하기

이번 글에서는 Jetpack Compose Canvas에서 직선을 그리기 위한 다양한 방법에 대해 살펴보았다. 직선은 모든 그림의 기본적인 구성요소이며, 우리가 그림판 같은 것들을 사용할 때도 그리는 모양들은 수없이 많은 직선으로 이루어진다. 

이번 글에서는 drawLine을 사용해 직선을 다양하게 만드는 방법에 대해 살펴보았다. 직선이 중요한 만큼 Canvas에서 직선을 다루는 방법도 제대로 알아두도록 하자.