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

顯示剪裁成形狀的圖片

你可以將圖片裁剪成特定形狀，並在形狀周圍繪製陰影，營造立體感。這項技術可用於建立設計，例如虛擬人偶和產品縮圖，或顯示自訂形狀的標誌。

如要顯示裁剪成特定形狀的圖片，請按照下列步驟操作：

建立形狀。
將圖片剪裁成該形狀。

結果

版本相容性

這項實作作業需要將專案 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