คุณสามารถผสมผสานหรือวางซ้อนรูปภาพต้นฉบับเพื่อแสดงรูปภาพแบบเลเยอร์บนผืนผ้าใบได้ เช่น คุณอาจจำลองวิธีที่เฟรมเวิร์ก Android สร้างไอคอนแอปโดยรวมองค์ประกอบที่วาดได้ของพื้นหลังและพื้นหน้าแยกกัน หากต้องการแสดงรูปภาพที่วางซ้อนกัน คุณต้องทําดังนี้
- วางเลเยอร์รูปภาพบน Canvas
- วางซ้อนแหล่งที่มา
ความเข้ากันได้ของเวอร์ชัน
การใช้งานนี้กำหนดให้โปรเจ็กต์ของคุณตั้งค่า minSDK เป็น API ระดับ 21 ขึ้นไป
ทรัพยากร Dependency
วางเลเยอร์รูปภาพบนภาพพิมพ์แคนวาส
โค้ดต่อไปนี้จะวางเลเยอร์รูปภาพต้นฉบับ 2 รูปซ้อนกัน แสดงผลรูปภาพที่ผสมกันบนผืนผ้าใบ
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 } }
ประเด็นสำคัญเกี่ยวกับรหัส
- ใช้
OverlayImagePainter
ซึ่งเป็นการใช้งานPainter
ที่กําหนดเองซึ่งคุณสามารถใช้วางซ้อนรูปภาพบนรูปภาพต้นฉบับได้ โหมดผสมผสานจะควบคุมวิธีรวมรูปภาพ รูปภาพแรกไม่ได้เขียนทับสิ่งอื่นใด คุณจึงไม่จำเป็นต้องใช้โหมดผสม โหมดผสมOverlay
ของรูปภาพที่สองจะเขียนทับบริเวณของรูปภาพแรกที่ถูกรูปภาพที่สองบดบัง DrawScope.onDraw()
จะถูกลบล้างและรูปภาพ 2 รูปจะวางซ้อนกันในฟังก์ชันนี้intrinsicSize
จะถูกลบล้างเพื่อรายงานขนาดจริงของรูปภาพที่รวมอย่างถูกต้อง
วางซ้อนรูปภาพต้นฉบับ
เมื่อใช้เครื่องมือวาดภาพที่กำหนดเอง Painter
นี้ คุณสามารถวางซ้อนรูปภาพบนรูปภาพต้นฉบับได้ดังนี้
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() )
ประเด็นสำคัญเกี่ยวกับรหัส
- ระบบจะโหลดรูปภาพที่จะรวมเป็นอินสแตนซ์
ImageBitmap
แต่ละรายการก่อนรวมโดยใช้OverlayImagePainter
- รูปภาพที่รวมกันจะได้รับการเรนเดอร์โดยคอมโพสิเบิล
Image
ที่ใช้โปรแกรมวาดภาพที่กำหนดเองเพื่อรวมรูปภาพต้นทางเมื่อทำการเรนเดอร์
ผลลัพธ์
![เครื่องมือวาดรูปที่กำหนดเองซึ่งวางซ้อนรูปภาพ 2 รูปไว้ด้วยกัน](https://developer.android.google.cn/static/develop/ui/compose/images/graphics-rainbowoverlay.jpg?hl=th)
Image
ที่ใช้ Painter
ที่กําหนดเองเพื่อวางซ้อนรูปภาพรุ้งแบบโปร่งแสงบางส่วนบนรูปภาพสุนัขคอลเล็กชันที่มีคู่มือนี้
คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่มีการดูแลจัดการ ซึ่งครอบคลุมเป้าหมายการพัฒนา Android ที่กว้างขึ้น ดังนี้
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=th)