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 zum Zeichnen benutzerdefinierter Grafiken ermöglicht. 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

Nachdem 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:

Ein benutzerdefinierter Painter 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

Empfehlungen für dich

• Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
• ImageBitmap im Vergleich zu ImageVector {:#bitmap-vs-vector}
• Grafiken in Compose
• Bilder werden geladen {:#loading-images}