Compose의 그래픽

많은 앱에서 화면에 표시되는 내용을 정확하게 제어할 수 있어야 합니다. 화면의 적절한 위치에 상자나 원을 배치하는 작은 작업일 수도 있고 다양한 스타일의 그래픽 요소를 정교하게 정렬해야 하는 작업일 수도 있습니다.

수정자와 DrawScope를 사용한 기본 그리기

Compose에서 맞춤 항목을 그리는 핵심 방법은 Modifier.drawWithContent, Modifier.drawBehind, Modifier.drawWithCache와 같은 수정자를 사용하는 것입니다.

예를 들어 컴포저블 뒤에 무언가를 그리려면 drawBehind 수정자를 사용하여 그리기 명령어를 실행하면 됩니다.

Spacer(
    modifier = Modifier
        .fillMaxSize()
        .drawBehind {
            // this = DrawScope
        }
)
CanvasSnippets.kt

그리기를 실행하는 컴포저블만 필요하다면 Canvas 컴포저블을 사용하면 됩니다. Canvas 컴포저블은 Modifier.drawBehind 주변의 편리한 래퍼입니다. 다른 Compose UI 요소와 동일한 방식으로 레이아웃에 Canvas를 배치합니다. Canvas 내에서 스타일과 위치를 정밀하게 제어하는 요소를 그릴 수 있습니다.

참고: 내부적으로 Compose는 뷰 기반 UI의 캔버스 및 기타 관련 객체를 사용합니다. 하지만 Compose를 사용하면 Canvas의 혼란스러운 부분이 대부분 단순화됩니다. 예를 들어 대부분의 뷰 기반 그래픽 요소는 Paint 도우미 객체를 사용합니다. Paint에서 설정한 구성 옵션 및 메서드 호출에서 설정한 구성 옵션을 알아야 합니다. 또한 성능을 저해하지 않도록 주의하여 Paint 객체를 만들어야 합니다. Compose가 이러한 세부정보를 처리합니다.

모든 그리기 수정자는 자체 상태를 유지하는 범위가 지정된 그리기 환경인 DrawScope를 노출합니다. 이렇게 하면 그래픽 요소 그룹의 매개변수를 설정할 수 있습니다. DrawScope는 DrawScope의 현재 크기를 지정하는 Size 객체인 size와 같은 몇 가지 유용한 필드를 제공합니다.

무언가를 그리려면 DrawScope에서 여러 그리기 함수 중 하나를 사용하면 됩니다. 예를 들어 다음 코드는 화면 왼쪽 상단에 직사각형을 그립니다.

Canvas(modifier = Modifier.fillMaxSize()) {
    val canvasQuadrantSize = size / 2F
    drawRect(
        color = Color.Magenta,
        size = canvasQuadrantSize
    )
}
CanvasSnippets.kt

그림 1. Compose에서 캔버스를 사용하여 그려진 직사각형

다양한 그리기 수정자에 관한 자세한 내용은 그래픽 수정자 문서를 참고하세요.

좌표계

화면에 무언가를 그리려면 항목의 오프셋(x 및 y)과 크기를 알아야 합니다. DrawScope의 대다수 그리기 메서드에서는 위치와 크기가 기본 매개변수 값으로 제공됩니다. 기본 매개변수는 일반적으로 항목을 캔버스의 [0, 0] 지점에 배치하며 전체 그리기 영역을 채우는 기본 size를 제공합니다. 위 예를 보면 직사각형이 왼쪽 상단에 배치된 것을 확인할 수 있습니다. 항목의 크기와 위치를 조정하려면 Compose의 좌표계를 알아야 합니다.

좌표계의 원점([0,0])은 그리기 영역에서 맨 왼쪽 상단 픽셀에 있습니다. x는 오른쪽으로 이동할수록 증가하고 y는 아래쪽으로 이동할수록 증가합니다.

참고: 모든 그리기 작업은 픽셀 크기를 사용하여 실행됩니다. 다양한 기기 밀도와 화면 크기에서 항목의 크기를 일관되게 유지하려면 .toPx()를 사용하여 dp에서 변환하거나 크기의 비율로 작업해야 합니다.

그림 2. 그리기 좌표계 및 그리기 그리드

예를 들어 캔버스 영역의 오른쪽 상단부터 왼쪽 하단까지 대각선을 그리려면 DrawScope.drawLine() 함수를 사용하고 다음과 같이 상응하는 x, y 위치로 시작 및 끝 오프셋을 지정하면 됩니다.

Canvas(modifier = Modifier.fillMaxSize()) {
    val canvasWidth = size.width
    val canvasHeight = size.height
    drawLine(
        start = Offset(x = canvasWidth, y = 0f),
        end = Offset(x = 0f, y = canvasHeight),
        color = Color.Blue
    )
}
CanvasSnippets.kt

기본 변환

DrawScope는 그리기 명령어 실행 위치나 방식을 변경하는 변환을 제공합니다.

참고: 이러한 변환은 컴포저블 수명 주기의 그리기 단계에만 적용됩니다. 크기나 위치를 변경해도 레이아웃 크기와 위치는 변경되지 않습니다. 레이아웃 크기 및 위치에서 벗어나는 요소는 다른 요소 위에 그려질 수 있습니다.

배율

DrawScope.scale()을 사용하여 그리기 작업의 크기를 배율로 늘립니다. scale()과 같은 작업은 상응하는 람다 내 모든 그리기 작업에 적용됩니다. 예를 들어 다음 코드는 scaleX를 10배, scaleY를 15배 늘립니다.

Canvas(modifier = Modifier.fillMaxSize()) {
    scale(scaleX = 10f, scaleY = 15f) {
        drawCircle(Color.Blue, radius = 20.dp.toPx())
    }
}
CanvasSnippets.kt

그림 3. 캔버스의 원에 배율 작업 적용

변환

DrawScope.translate()를 사용하여 그리기 작업을 위, 아래, 왼쪽, 오른쪽으로 이동합니다. 예를 들어 다음 코드는 그림을 오른쪽으로 100픽셀, 위로 300픽셀 이동합니다.

Canvas(modifier = Modifier.fillMaxSize()) {
    translate(left = 100f, top = -300f) {
        drawCircle(Color.Blue, radius = 200.dp.toPx())
    }
}
CanvasSnippets.kt

그림 4. 캔버스의 원에 변환 작업 적용

회전

DrawScope.rotate()를 사용하여 피벗 지점을 중심으로 그리기 작업을 회전합니다. 예를 들어 다음 코드는 직사각형을 45도 회전합니다.

Canvas(modifier = Modifier.fillMaxSize()) {
    rotate(degrees = 45F) {
        drawRect(
            color = Color.Gray,
            topLeft = Offset(x = size.width / 3F, y = size.height / 3F),
            size = size / 3F
        )
    }
}
CanvasSnippets.kt

그림 5. rotate()를 사용하여 현재 그리기 범위에 회전을 적용하여 직사각형을 45도 회전

인셋

DrawScope.inset()을 사용하여 현재 DrawScope의 기본 매개변수를 조정해 그리기 경계를 변경하고 그림을 적절히 변환합니다.

Canvas(modifier = Modifier.fillMaxSize()) {
    val canvasQuadrantSize = size / 2F
    inset(horizontal = 50f, vertical = 30f) {
        drawRect(color = Color.Green, size = canvasQuadrantSize)
    }
}
CanvasSnippets.kt

이 코드는 사실상 그리기 명령어에 패딩을 추가합니다.

그림 6. 그리기 명령어에 인셋 적용

여러 변환

그림에 여러 변환을 적용하려면 DrawScope.withTransform() 함수를 사용합니다. 이 함수는 원하는 모든 변경사항을 결합하는 단일 변환을 만들어 적용합니다. withTransform()을 사용하면 Compose가 중첩된 각 변환을 계산하고 저장할 필요 없이 모든 변환이 단일 작업으로 함께 실행되므로 개별 변환을 중첩 호출하는 것보다 더 효율적입니다.

예를 들어 다음 코드는 직사각형에 변환과 회전을 모두 적용합니다.

Canvas(modifier = Modifier.fillMaxSize()) {
    withTransform({
        translate(left = size.width / 5F)
        rotate(degrees = 45F)
    }) {
        drawRect(
            color = Color.Gray,
            topLeft = Offset(x = size.width / 3F, y = size.height / 3F),
            size = size / 3F
        )
    }
}
CanvasSnippets.kt

그림 7. withTransform을 사용하여 회전과 변환을 모두 적용하여 직사각형을 회전하고 왼쪽으로 이동

일반적인 그리기 작업

텍스트 그리기

Compose에서 텍스트를 그리려면 일반적으로 Text 컴포저블을 사용하면 됩니다. 그러나 DrawScope에 있거나 맞춤설정으로 텍스트를 수동으로 그리려면 DrawScope.drawText() 메서드를 사용하세요.

텍스트를 그리려면 rememberTextMeasurer를 사용하여 TextMeasurer를 만들고 이 측정기를 사용하여 drawText를 호출합니다.

val textMeasurer = rememberTextMeasurer()

Canvas(modifier = Modifier.fillMaxSize()) {
    drawText(textMeasurer, "Hello")
}
CanvasSnippets.kt

그림 8. 캔버스에 텍스트 그리기

텍스트 측정

텍스트 그리기는 다른 그리기 명령어와 약간 다르게 작동합니다. 일반적으로 그리기 명령어에는 도형/이미지를 그릴 수 있는 크기(너비, 높이)가 제공됩니다. 텍스트의 경우 렌더링된 텍스트의 크기를 제어하는 몇 가지 매개변수(예: 글꼴 크기, 글꼴, 합자, 글자 간격)가 있습니다.

Compose에서는 TextMeasurer를 사용하여 위의 요소에 따라 측정된 텍스트 크기에 액세스할 수 있습니다. 텍스트 뒤에 배경을 그리려면 측정된 정보를 사용하여 텍스트가 차지하는 영역의 크기를 가져올 수 있습니다.

val textMeasurer = rememberTextMeasurer()

Spacer(
    modifier = Modifier
        .drawWithCache {
            val measuredText =
                textMeasurer.measure(
                    AnnotatedString(longTextSample),
                    constraints = Constraints.fixedWidth((size.width * 2f / 3f).toInt()),
                    style = TextStyle(fontSize = 18.sp)
                )

            onDrawBehind {
                drawRect(pinkColor, size = measuredText.size.toSize())
                drawText(measuredText)
            }
        }
        .fillMaxSize()
)
CanvasSnippets.kt

참고: 위의 예에서는 Modifier.drawWithCache를 사용합니다. 텍스트 그리기가 비용이 많이 드는 작업이기 때문입니다. drawWithCache를 사용하면 그리기 영역의 크기가 변경될 때까지 만들어진 객체를 쉽게 캐시할 수 있습니다. 자세한 내용은 Modifier.drawWithCache 문서를 참고하세요.

다음 코드 스니펫은 텍스트에 분홍색 배경을 생성합니다.

그림 9. 배경 직사각형과 함께 전체 영역의 2⁄3 크기를 차지하는 여러 줄의 텍스트

제약 조건이나 글꼴 크기, 측정된 크기에 영향을 미치는 모든 속성을 조정하면 새로운 크기가 보고됩니다. width 및 height에 모두 고정된 크기를 설정할 수 있습니다. 그러면 텍스트가 설정된 TextOverflow를 따릅니다. 예를 들어 다음 코드는 컴포저블 영역의 1⁄3 높이와 1⁄3 너비로 텍스트를 렌더링하고 TextOverflow를 TextOverflow.Ellipsis로 설정합니다.

val textMeasurer = rememberTextMeasurer()

Spacer(
    modifier = Modifier
        .drawWithCache {
            val measuredText =
                textMeasurer.measure(
                    AnnotatedString(longTextSample),
                    constraints = Constraints.fixed(
                        width = (size.width / 3f).toInt(),
                        height = (size.height / 3f).toInt()
                    ),
                    overflow = TextOverflow.Ellipsis,
                    style = TextStyle(fontSize = 18.sp)
                )

            onDrawBehind {
                drawRect(pinkColor, size = measuredText.size.toSize())
                drawText(measuredText)
            }
        }
        .fillMaxSize()
)
CanvasSnippets.kt

이제 생략 부호가 끝에 있는 텍스트가 제약 조건으로 그려집니다.

그림 10. 텍스트 측정에 관한 고정된 제약 조건이 있는 TextOverflow.Ellipsis

참고: 텍스트에 관한 자세한 내용은 텍스트 문서를 참고하세요.

이미지 그리기

DrawScope로 ImageBitmap을 그리려면 ImageBitmap.imageResource()를 사용하여 이미지를 로드한 다음 drawImage를 호출합니다.

val dogImage = ImageBitmap.imageResource(id = R.drawable.dog)

Canvas(modifier = Modifier.fillMaxSize(), onDraw = {
    drawImage(dogImage)
})
CanvasSnippets.kt

그림 11. 캔버스에 ImageBitmap 그리기

참고: 이미지에 필터를 적용하는 방법에 관한 자세한 내용은 이미지 맞춤설정 문서를 참고하세요.

기본 도형 그리기

DrawScope에는 도형 그리기 함수가 많이 있습니다. 도형을 그리려면 drawCircle과 같은 사전 정의된 그리기 함수 중 하나를 사용합니다.

val purpleColor = Color(0xFFBA68C8)
Canvas(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp),
    onDraw = {
        drawCircle(purpleColor)
    }
)
CanvasSnippets.kt

API	출력
drawCircle()
drawRect()
drawRoundedRect()
drawLine()
drawOval()
drawArc()
drawPoints()

경로 그리기

경로는 일련의 수학적 명령으로, 실행 후에 그리기가 생성됩니다. DrawScope는 DrawScope.drawPath() 메서드를 사용하여 경로를 그릴 수 있습니다.

예를 들어 삼각형을 그리고 싶다고 가정해 보겠습니다. 그리기 영역의 크기를 사용하여 lineTo() 및 moveTo()와 같은 함수로 경로를 생성할 수 있습니다. 그런 다음 새로 만들어진 이 경로로 drawPath()를 호출하여 삼각형을 가져옵니다.

Spacer(
    modifier = Modifier
        .drawWithCache {
            val path = Path()
            path.moveTo(0f, 0f)
            path.lineTo(size.width / 2f, size.height / 2f)
            path.lineTo(size.width, 0f)
            path.close()
            onDrawBehind {
                drawPath(path, Color.Magenta, style = Stroke(width = 10f))
            }
        }
        .fillMaxSize()
)
CanvasSnippets.kt

그림 12. Compose에서 Path 만들기 및 그리기

Canvas 객체에 액세스

DrawScope를 사용하면 Canvas 객체에 직접 액세스할 수 없습니다. DrawScope.drawIntoCanvas()를 사용하여, 함수를 호출할 수 있는 Canvas 객체 자체에 액세스할 수 있습니다.

예를 들어 캔버스에 그리려는 맞춤 Drawable이 있으면 캔버스에 액세스하고 Drawable#draw()를 호출하여 Canvas 객체를 전달할 수 있습니다.

val drawable = ShapeDrawable(OvalShape())
Spacer(
    modifier = Modifier
        .drawWithContent {
            drawIntoCanvas { canvas ->
                drawable.setBounds(0, 0, size.width.toInt(), size.height.toInt())
                drawable.draw(canvas.nativeCanvas)
            }
        }
        .fillMaxSize()
)
CanvasSnippets.kt

그림 13. 캔버스에 액세스하여 Drawable 그리기

자세히 알아보기

Compose에서 그리기에 관한 자세한 내용은 다음 리소스를 참고하세요.

• 그래픽 수정자: 다양한 유형의 그리기 수정자에 관해 알아보세요.
• 브러시: 콘텐츠 페인팅을 맞춤설정하는 방법을 알아보세요.
• Compose의 맞춤 레이아웃 및 그래픽 - Android Dev Summit 2022: 레이아웃과 그래픽을 사용하여 Compose에서 맞춤 UI를 빌드하는 방법을 알아보세요.
• JetLagged 샘플: 맞춤 그래프를 그리는 방법을 보여주는 Compose 샘플입니다.