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

Hiển thị hình ảnh được xếp lớp trên canvas

Bạn có thể kết hợp hoặc phủ hình ảnh nguồn để hiển thị hình ảnh được xếp lớp trên canvas. Ví dụ: bạn có thể mô phỏng cách Khung Android tạo biểu tượng ứng dụng bằng cách kết hợp các đối tượng có thể vẽ riêng biệt ở nền trước và nền sau. Để hiển thị hình ảnh phân lớp, bạn phải làm như sau:

Xếp chồng hình ảnh trên canvas.
Lớp phủ nguồn.

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

Xếp chồng hình ảnh trên canvas

Mã sau đây xếp chồng hai hình ảnh nguồn lên nhau, kết xuất hình ảnh kết hợp trên canvas:

class OverlayImagePainter constructor(
    private val image: ImageBitmap,
    private val imageOverlay: ImageBitmap,
    private val srcOffset: IntOffset = IntOffset.Zero,
    private val srcSize: IntSize = IntSize(image.width, image.height),
    private val overlaySize: IntSize = IntSize(imageOverlay.width, imageOverlay.height)
) : Painter() {

    private val size: IntSize = validateSize(srcOffset, srcSize)
    override fun DrawScope.onDraw() {
        // draw the first image without any blend mode
        drawImage(
            image,
            srcOffset,
            srcSize,
            dstSize = IntSize(
                this@onDraw.size.width.roundToInt(),
                this@onDraw.size.height.roundToInt()
            )
        )
        // draw the second image with an Overlay blend mode to blend the two together
        drawImage(
            imageOverlay,
            srcOffset,
            overlaySize,
            dstSize = IntSize(
                this@onDraw.size.width.roundToInt(),
                this@onDraw.size.height.roundToInt()
            ),
            blendMode = BlendMode.Overlay
        )
    }

    /**
     * Return the dimension of the underlying [ImageBitmap] as it's intrinsic width and height
     */
    override val intrinsicSize: Size get() = size.toSize()

    private fun validateSize(srcOffset: IntOffset, srcSize: IntSize): IntSize {
        require(
            srcOffset.x >= 0 &&
                srcOffset.y >= 0 &&
                srcSize.width >= 0 &&
                srcSize.height >= 0 &&
                srcSize.width <= image.width &&
                srcSize.height <= image.height
        )
        return srcSize
    }
}CustomPainterSnippets.kt

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

Sử dụng OverlayImagePainter, đây là một phương thức triển khai Painter tuỳ chỉnh mà bạn có thể dùng để phủ hình ảnh lên hình ảnh nguồn. Chế độ kết hợp kiểm soát cách kết hợp hình ảnh. Hình ảnh đầu tiên không ghi đè bất kỳ nội dung nào khác, vì vậy, bạn không cần chế độ kết hợp. Chế độ kết hợp Overlay của hình ảnh thứ hai sẽ ghi đè các vùng của hình ảnh đầu tiên bị hình ảnh thứ hai che khuất.
DrawScope.onDraw() bị ghi đè và hai hình ảnh được phủ lên nhau trong hàm này.
intrinsicSize được ghi đè để báo cáo chính xác kích thước nội tại của hình ảnh kết hợp.

Hình ảnh nguồn lớp phủ

Với Painter tuỳ chỉnh Painter này, bạn có thể phủ một hình ảnh lên hình ảnh nguồn như sau:

val rainbowImage = ImageBitmap.imageResource(id = R.drawable.rainbow)
val dogImage = ImageBitmap.imageResource(id = R.drawable.dog)
val customPainter = remember {
    OverlayImagePainter(dogImage, rainbowImage)
}
Image(
    painter = customPainter,
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier.wrapContentSize()
)CustomPainterSnippets.kt

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

Các hình ảnh cần kết hợp được tải dưới dạng các thực thể ImageBitmap trước khi được kết hợp bằng OverlayImagePainter.
Hình ảnh kết hợp được kết xuất bằng thành phần kết hợp Image sử dụng trình vẽ tuỳ chỉnh để kết hợp hình ảnh nguồn khi kết xuất.