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 khaiPainter
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ợpOverlay
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ằngOverlayImagePainter
. - 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](https://developer.android.com/static/develop/ui/compose/images/graphics-rainbowoverlay.jpg?hl=vi)
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:
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=vi)