[Android] Compose drawLine를 이용한 선긋기

Compose에서는 Canvas의 drawline 함수를 이용하여 선을 그릴 수 있습니다.

 

drawLine 함수

먼저 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 입니다.

starts는 시작점, end 끝점, strokeWidth는 선의굵기 입니다.

start,end의 속성의 타입은 Offset이라는 클래스 입니다.

 

가로직선 코드

먼저 가로 직선을 그려보겠습니다.

Offset 파라미터에는 x, y 좌표를 넣어줍니다.

가로직선의 시작점 좌표 startX 값은 0f이고, 끝점 좌표 endX의 값은 width의 사이즈 입니다.

y좌표는 변하지 않으니 0f 으로 고정해줍니다.

@Composable
fun DrawHorizontalLine() {
    Canvas(modifier = Modifier
        .fillMaxSize()
        .padding(16.dp)
    ) {
        val startX = 0f
        val endX = size.width

        drawLine(
            color = Color.Black,
            start = Offset(startX, 0f),
            end = Offset(endX, 0f),
            strokeWidth = 2.dp.toPx()
        )
    }
}

 

빌드를 하면 아래와 같은 가로 직선이 그려집니다.

 

 

세로직선 코드

세로직선 코드는 가로와 반대로 작성해주면 됩니다.

x좌표를 0f로 고정해주고 y좌표의 시작점과 끝점만 정해주면 됩니다.

@Composable
fun DrawHorizontalLine() {
    Canvas(modifier = Modifier
        .fillMaxSize()
        .padding(16.dp)
    ) {
        val startY = 0f
        val endY = size.height

        drawLine(
            color = Color.Black,
            start = Offset(0f, startY),
            end = Offset(0f, endY),
            strokeWidth = 2.dp.toPx()
        )
    }
}

 

빌드를 하면 아래와 같은 세로 직선이 그려집니다.

 

바둑판 그리기

 

바둑판은 가로선과 세로선이 반복해서 그려진 형태입니다.

각 선사이의 간격을 정해주고, for문으로 반복해서 가로와 세로를 그려주면 됩니다.

@Composable
fun DrawLines() {
    Canvas(modifier = Modifier
        .fillMaxSize()
    ) {
        val spacing = 50.dp.toPx()  // 각 선 사이의 간격
        val startX = 0f
        val endX = size.width

        // 가로
        for (i in 0..(size.height / spacing).toInt()) {
            val y = i * spacing
            drawLine(
                color = Color.Black,
                start = Offset(startX, y),
                end = Offset(endX, y),
                strokeWidth = 2.dp.toPx()
            )
        }

        val startY = 0f
        val endY = size.height

        // 세로
        for (i in 0..(size.width / spacing).toInt()) {
            val x = i * spacing
            drawLine(
                color = Color.Black,
                start = Offset(x, startY),
                end = Offset(x, endY),
                strokeWidth = 2.dp.toPx()
            )
        }
    }
}

 

빌드를 하면 바둑판 처럼 가로세로 직선이 반복해서 그려집니다.

 

 

감사합니다.