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
    }
}

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()
)

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.

Kết quả

Painter tuỳ chỉnh phủ 2 hình ảnh lên nhau
Hình 1: Image sử dụng Painter tuỳ chỉnh để phủ hình ảnh cầu vồng bán trong suốt lên hình ảnh một chú chó.

Các bộ sưu tập chứa hướng dẫn này

Hướng dẫn này là một phần của các bộ sưu tập Hướng dẫn nhanh được tuyển chọn này, bao gồm các mục tiêu phát triển Android rộng hơn:

Khám phá các kỹ thuật sử dụng hình ảnh tươi sáng, bắt mắt để mang lại giao diện đẹp mắt cho ứng dụng Android.

Bạn có câu hỏi hoặc ý kiến phản hồi

Hãy truy cập vào trang câu hỏi thường gặp để tìm hiểu về các hướng dẫn nhanh hoặc liên hệ với chúng tôi để cho chúng tôi biết suy nghĩ của bạn.