Wyświetlanie obrazów złożonych z warstw na obszarze roboczym

Możesz mieszać lub nakładać obrazy źródłowe, aby wyświetlać obrazy nałożone na płótnie. Możesz na przykład odtworzyć sposób generowania ikon aplikacji przez Android Framework, łącząc oddzielne elementy rysowane na tle i na pierwszym planie. Aby wyświetlić obrazy warstwowe:

  • nakładać obrazy na obszar roboczy.
  • nakładać źródło.

Zgodność wersji

Ta implementacja wymaga, aby minimalna wersja pakietu SDK projektu była ustawiona na poziom API 21 lub wyższy.

Zależności

Umieszczanie obrazów na warstwach

Ten kod nakłada 2 obrazy źródłowe na siebie, tworząc na płótnie obraz łączony:

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

Najważniejsze informacje o kodzie

  • Używa elementu OverlayImagePainter, który jest niestandardową implementacją elementu Painter. Możesz go użyć do nakładania obrazów na obraz źródłowy. Tryb mieszania określa sposób łączenia obrazów. Pierwsze zdjęcie nie zastępuje niczego innego, więc nie trzeba stosować żadnego trybu mieszania. Tryb Overlay drugiego obrazu zastępuje obszary pierwszego obrazu, które są pokryte przez drugi obraz.
  • DrawScope.onDraw() jest zastąpiony, a w ramach tej funkcji oba obrazy są nakładane.
  • intrinsicSize jest zastąpiony, aby prawidłowo raportować rozmiar rzeczywisty połączonego obrazu.

Nakładanie obrazu źródłowego

Za pomocą tego narzędzia do ręcznej edycji Painter możesz nałożyć obraz na obraz źródłowy w ten sposób:

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

Najważniejsze informacje o kodzie

  • Obrazy, które mają zostać połączone, są wczytywane jako instancje ImageBitmap, zanim zostaną połączone za pomocą funkcji OverlayImagePainter.
  • Połączone obrazy są renderowane przez komponent Image, który podczas renderowania używa niestandardowego malarza do łączenia obrazów źródłowych.

Wyniki

Malowanie niestandardowe z nałożeniem 2 obrazów na siebie
Ilustracja 1. Image, który używa niestandardowego Painter, aby nałożyć półprzezroczysty obraz tęczy na obrazie psa.

Kolekcje zawierające ten przewodnik

Ten przewodnik należy do tych kolekcji krótkich przewodników, które obejmują szersze zagadnienia związane z tworzeniem aplikacji na Androida:

Poznaj techniki tworzenia jasnych i przyciągających uwagę elementów wizualnych, które nadadzą Twojej aplikacji na Androida atrakcyjny wygląd.
Kolekcja krótkich przewodników

Masz pytania lub chcesz przekazać opinię?

Otwórz stronę z najczęstszymi pytaniami i poznaj krótkie przewodniki lub skontaktuj się z nami i powiedz nam, co o tym myślisz.
Najczęstsze pytania Prześlij opinię