Trang này được dịch bởi Cloud Translation API.

Hiển thị hình ảnh được cắt thành một hình dạng

Bạn có thể điều chỉnh hình ảnh cho vừa với một hình dạng đã cắt và vẽ bóng xung quanh chu vi của hình dạng đó để tạo cảm giác ba chiều. Kỹ thuật này hữu ích cho việc tạo các thiết kế như hình đại diện và hình thu nhỏ sản phẩm hoặc hiển thị biểu trưng có hình dạng tuỳ chỉnh.

Để hiển thị hình ảnh được cắt theo một hình dạng, bạn phải làm như sau:

Tạo hình dạng.
Cắt hình ảnh theo hình dạng.

Khả năng tương thích của phiên bản

Phương thức triển khai này yêu cầu bạn phải đặt minSDK của dự án thành API cấp 21 trở lên.

Phần phụ thuộc

Tạo hình dạng

Mã sau đây tạo một hình dạng tuỳ chỉnh có thể vẽ và kết xuất một đa giác bo tròn một cách linh động:

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

Các điểm chính về mã

RoundedPolygon.getBounds() xác định một hàm mở rộng trên lớp RoundedPolygon để tính toán các giới hạn của hàm đó.
Lớp RoundedPolygonShape triển khai giao diện Shape, cho phép bạn xác định một hình dạng tuỳ chỉnh (đa giác bo tròn) trong Jetpack Compose.
Hình dạng này sử dụng Matrix để quản lý các thao tác điều chỉnh tỷ lệ và dịch để kết xuất linh hoạt.
Hàm createOutline() lấy một đối tượng RoundedPolygon, điều chỉnh theo tỷ lệ và dịch đối tượng đó để vừa với một kích thước nhất định, đồng thời trả về một đối tượng Outline mô tả hình dạng cuối cùng cần vẽ.

Cắt hình ảnh thành một hình dạng

Mã sau đây sẽ cắt hình ảnh thành hình lục giác và thêm một bóng đổ tinh tế để tạo cảm giác chiều sâu:

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

Các điểm chính về mã

Các đối tượng RoundedPolygon và RoundedPolygonShape được dùng để xác định và áp dụng hình lục giác cho hình ảnh.
Mã này sử dụng graphicsLayer để thêm bóng dựa trên độ cao vào hình ảnh. Điều này tạo ra cảm giác về chiều sâu và sự tách biệt về hình ảnh với nền.
Việc sử dụng các khối remember giúp tối ưu hoá hiệu suất bằng cách đảm bảo rằng các định nghĩa về hình dạng và cắt chỉ được tính toán một lần và được ghi nhớ để kết hợp lại giao diện người dùng sau này.