Menampilkan gambar berlapis di kanvas

Anda dapat menggabungkan atau menempatkan gambar sumber untuk menampilkan gambar berlapis di kanvas. Misalnya, Anda dapat mereplikasi cara Android Framework membuat ikon aplikasi dengan menggabungkan drawable latar belakang dan latar depan yang terpisah. Untuk menampilkan gambar berlapis, Anda harus melakukan hal berikut:

  • Membuat lapisan gambar di kanvas.
  • Tumpang-tindih sumber.

Kompatibilitas versi

Implementasi ini mengharuskan minSDK project Anda ditetapkan ke API level 21 atau yang lebih tinggi.

Dependensi

Membuat lapisan gambar di kanvas

Kode berikut menempatkan dua gambar sumber di atas satu sama lain, yang merender gambar gabungan di kanvas:

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

Poin-poin penting tentang kode

  • Menggunakan OverlayImagePainter, yang merupakan implementasi Painter kustom yang dapat Anda gunakan untuk menempatkan gambar di atas gambar sumber. Mode gabungan mengontrol cara gambar digabungkan. Gambar pertama tidak menimpa apa pun, sehingga tidak diperlukan mode gabungan. Mode gabungan Overlay dari gambar kedua menimpa area gambar pertama yang tercakup oleh gambar kedua.
  • DrawScope.onDraw() diganti dan kedua gambar ditempatkan dalam fungsi ini.
  • intrinsicSize diganti untuk melaporkan ukuran intrinsik gambar gabungan dengan benar.

Gambar sumber overlay

Dengan Painter painter kustom ini, Anda dapat menempatkan gambar di atas gambar sumber sebagai berikut:

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

Poin-poin penting tentang kode

  • Setiap gambar yang akan digabungkan dimuat sebagai instance ImageBitmap sebelum digabungkan menggunakan OverlayImagePainter.
  • Gambar gabungan dirender oleh composable Image yang menggunakan painter kustom untuk menggabungkan gambar sumber saat merender.

Hasil

Painter Kustom yang menempatkan dua gambar di atas satu sama lain
Gambar 1: Image yang menggunakan Painter kustom untuk menempatkan gambar pelangi semi-transparan di atas gambar anjing.

Koleksi yang berisi panduan ini

Panduan ini adalah bagian dari koleksi Panduan Cepat pilihan yang membahas sasaran pengembangan Android yang lebih luas:

Temukan teknik untuk menggunakan visual yang cerah dan menarik untuk memberikan tampilan dan nuansa yang menarik pada aplikasi Android Anda.
Koleksi panduan cepat

Ada pertanyaan atau masukan

Buka halaman pertanyaan umum (FAQ) dan pelajari panduan singkat atau hubungi kami dan beri tahu kami pendapat Anda.
Buka FAQ Berikan masukan