Maler und Lackierer

In Compose wird ein Painter-Objekt verwendet, um etwas darzustellen, das gezeichnet werden kann (ein Ersatz für die in Android definierten Drawable APIs) und die Größe und das Layout des entsprechenden Composeables zu beeinflussen, in dem es verwendet wird . Ein BitmapPainter nimmt einen ImageBitmap auf, der ein Bitmap auf dem Bildschirm zeichnen kann.

In den meisten Fällen wird mit painterResource() oben der richtige Maler für das Asset zurückgegeben (d.h. BitmapPainter oder VectorPainter). Weitere Informationen zu den Unterschieden zwischen den beiden finden Sie im Abschnitt ImageBitmap im Vergleich zu ImageVector.

Ein Painter unterscheidet sich von einem DrawModifier, das sich streng innerhalb der ihm zugewiesenen Grenzen zeichnet und keinen Einfluss auf die Größe oder das Layout des Composeables hat.

Um einen benutzerdefinierten Maler zu erstellen, erweitern Sie die Klasse Painter und implementieren Sie die Methode onDraw, die den Zugriff auf die DrawScope ermöglicht, um benutzerdefinierte Grafiken zu zeichnen. Sie können auch intrinsicSize überschreiben, um das darin enthaltene Composable zu beeinflussen:

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

Jetzt, da wir unsere benutzerdefinierte Painter haben, können wir wie unten beschrieben ein beliebiges Bild auf das Quellbild legen:

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

Die Ausgabe der Kombination der beiden Bilder mit einem benutzerdefinierten Painter sehen Sie unten:

Benutzerdefinierte Malfunktion, mit der zwei Bilder übereinander gelegt werden
Abbildung 1: Benutzerdefinierter Painter, der zwei Bilder übereinander legt

Ein benutzerdefinierter Maler kann auch mit Modifier.paint(customPainter) verwendet werden, um Inhalte auf eine Komposition zu zeichnen:

val rainbowImage = ImageBitmap.imageResource(id = R.drawable.rainbow)
val dogImage = ImageBitmap.imageResource(id = R.drawable.dog)
val customPainter = remember {
    OverlayImagePainter(dogImage, rainbowImage)
}
Box(
    modifier =
    Modifier.background(color = Color.Gray)
        .padding(30.dp)
        .background(color = Color.Yellow)
        .paint(customPainter)
) { /** intentionally empty **/ }
CustomPainterSnippets.kt

Zurück
Bild anpassen
Weiter
Leistungsoptimierung