Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

도형으로 잘린 이미지 표시

이미지를 잘린 도형에 맞게 조정하고 도형의 둘레에 그림자를 그려 3차원 느낌을 줄 수 있습니다. 이 기법은 아바타, 제품 썸네일과 같은 디자인을 만들거나 맞춤 도형으로 로고를 표시하는 데 유용합니다.

도형으로 잘린 이미지를 표시하려면 다음 단계를 따르세요.

도형을 만듭니다.
도형에 이미지를 자릅니다.

결과

가장자리에 그림자가 적용된 육각형 속의 개 — **그림 1.** 클립으로 적용된 맞춤 도형

버전 호환성

이 구현에서는 프로젝트 minSDK를 API 수준 21 이상으로 설정해야 합니다.

종속 항목

도형 만들기

다음 코드는 둥근 다각형을 동적으로 그리고 렌더링할 수 있는 맞춤 도형을 만듭니다.

fun RoundedPolygon.getBounds() = calculateBounds().let { Rect(it[0], it[1], it[2], it[3]) }
class RoundedPolygonShape(
    private val polygon: RoundedPolygon,
    private var matrix: Matrix = Matrix()
) : Shape {
    private var path = Path()
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        path.rewind()
        path = polygon.toPath().asComposePath()
        matrix.reset()
        val bounds = polygon.getBounds()
        val maxDimension = max(bounds.width, bounds.height)
        matrix.scale(size.width / maxDimension, size.height / maxDimension)
        matrix.translate(-bounds.left, -bounds.top)

        path.transform(matrix)
        return Outline.Generic(path)
    }
}ShapesSnippets.kt

코드의 주요사항

RoundedPolygon.getBounds()는 RoundedPolygon 클래스에서 확장 함수를 정의하여 경계를 계산합니다.
RoundedPolygonShape 클래스는 Shape 인터페이스를 구현하므로 Jetpack Compose에서 맞춤 도형 (둥근 다각형)을 정의할 수 있습니다.
도형은 Matrix를 사용하여 유연한 렌더링을 위한 확장 및 변환 작업을 관리합니다.
createOutline() 함수는 RoundedPolygon 객체를 가져와 지정된 크기에 맞게 확장 및 변환하고 그릴 최종 도형을 설명하는 Outline 객체 를 반환합니다.

도형에 이미지 자르기

다음 코드는 이미지를 육각형으로 자르고 미묘한 그림자를 추가하여 깊이감을 제공합니다.

val hexagon = remember {
    RoundedPolygon(
        6,
        rounding = CornerRounding(0.2f)
    )
}
val clip = remember(hexagon) {
    RoundedPolygonShape(polygon = hexagon)
}
Box(
    modifier = Modifier
        .clip(clip)
        .background(MaterialTheme.colorScheme.secondary)
        .size(200.dp)
) {
    Text(
        "Hello Compose",
        color = MaterialTheme.colorScheme.onSecondary,
        modifier = Modifier.align(Alignment.Center)
    )
}ShapesSnippets.kt

코드의 주요사항

RoundedPolygon 및 RoundedPolygonShape 객체는 이미지에 육각형 도형을 정의하고 적용하는 데 사용됩니다.
이 코드는 graphicsLayer를 사용하여 이미지에 고도 기반 그림자를 추가합니다. 이렇게 하면 배경에서 깊이감과 시각적 분리가 생성됩니다.
remember 블록을 사용하면 도형 및 클리핑 정의가 한 번만 계산되고 UI의 후속 재구성에서 기억되도록 하여 성능이 최적화됩니다.