Maler und Lackierer

In Compose wird ein Painter-Objekt verwendet, um etwas darzustellen, das gezeichnet werden kann. (als Ersatz für die in Android definierten Drawable APIs) und beeinflussen Maße und Layout der entsprechenden zusammensetzbaren Funktion, in der sie verwendet wird . A BitmapPainter nimmt ein ImageBitmap, das ein Bitmap auf dem Bildschirm zeichnen kann.

In den meisten Anwendungsfällen wird bei Verwendung des painterResource() oben die korrekte Painter für das Asset (z.B. BitmapPainter oder VectorPainter). Weitere Informationen Informationen zu den Unterschieden zwischen den beiden erhalten Sie im Abschnitt ImageBitmap vs. ImageVector.

Ein Painter unterscheidet sich von einem DrawModifier, das streng innerhalb der definiert haben und keinen Einfluss auf die Messung oder das Layout der zusammensetzbaren Funktion.

Erweitern Sie die Painter-Klasse und implementieren Sie die Methode onDraw-Methode, die Zugriff auf DrawScope ermöglicht, um benutzerdefinierte Grafiken. Sie können auch die intrinsicSize überschreiben, die für beeinflussen die Composable, in der sie enthalten ist:

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

Da wir nun die benutzerdefinierte Painter haben, können wir jedes Bild über die Quell-Image so:

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

Unten sehen Sie, wie sich die beiden Bilder mit einem benutzerdefinierten Painter kombinieren lassen:

<ph type="x-smartling-placeholder">

</ph>

Ein benutzerdefinierter Maler kann auch mit dem Modifier.paint(customPainter) verwendet werden um den Inhalt wie folgt in eine zusammensetzbare Funktion zu ziehen:

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 vs. ImageVector {:#bitmap-vs-vector}
• Grafiken in „Compose“
• Bilder werden geladen {:#loading-images}