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 } }
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() )
Unten sehen Sie, wie sich die beiden Bilder mit einem benutzerdefinierten Painter kombinieren lassen:
<ph type="x-smartling-placeholder">![Benutzerdefinierter Painter, bei dem zwei Bilder übereinander gelegt werden](https://developer.android.google.cn/static/develop/ui/compose/images/graphics-rainbowoverlay.jpg?authuser=6&hl=de)
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 **/ }
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}