แสดงรูปภาพที่วางซ้อนกันบนผืนผ้าใบ

คุณสามารถผสมผสานหรือวางซ้อนรูปภาพต้นฉบับเพื่อแสดงรูปภาพแบบเลเยอร์บนผืนผ้าใบได้ เช่น คุณอาจจำลองวิธีที่เฟรมเวิร์ก 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 รูปไว้ด้วยกัน
รูปที่ 1: Image ที่ใช้ Painter ที่กําหนดเองเพื่อวางซ้อนรูปภาพรุ้งแบบโปร่งแสงบางส่วนบนรูปภาพสุนัข

คอลเล็กชันที่มีคู่มือนี้

คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่มีการดูแลจัดการ ซึ่งครอบคลุมเป้าหมายการพัฒนา Android ที่กว้างขึ้น ดังนี้

ดูเทคนิคการใช้ภาพสดใสที่ดึงดูดความสนใจเพื่อให้แอป Android ของคุณมีรูปลักษณ์ที่สวยงาม

หากมีคำถามหรือความคิดเห็น

ไปที่หน้าคำถามที่พบบ่อยเพื่อดูคู่มือฉบับย่อหรือติดต่อเราเพื่อบอกความคิดเห็นของคุณ