W interfejsie Compose obiekt Painter
służy do reprezentowania czegoś, co można narysować (zastępuje on interfejsy API Drawable
zdefiniowane w Androidzie), a także do wpływu na pomiary i układ odpowiedniego elementu kompozycyjnego, który z niego korzysta . BitmapPainter
pobiera instrukcję ImageBitmap
, która może wyświetlić Bitmap
na ekranie.
W większości przypadków użycie tego atrybutu painterResource()
zwraca prawidłową grafikę zasobu (np. BitmapPainter
lub VectorPainter
). Więcej informacji o różnicach między nimi znajdziesz w sekcji ImageBitmap a ImageVector.
Element Painter
różni się od elementu DrawModifier
, który ściśle mieści się w wyznaczonych granicach i nie ma wpływu na pomiary ani układ funkcji kompozycyjnej.
Aby utworzyć malarstwo niestandardowe, rozszerz klasę Painter
i zaimplementuj metodę onDraw
, która umożliwia dostęp do DrawScope
w celu rysowania niestandardowych grafik. Możesz też zastąpić właściwość intrinsicSize
, która będzie miała wpływ na kompozycję, w której się znajduje:
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 } }
Teraz, gdy mamy już niestandardowy element Painter
, możemy nałożyć na niego dowolny obraz 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() )
Efekty połączenia 2 obrazów z malarzem niestandardowym można zobaczyć poniżej:
Za pomocą malarstwa niestandardowego możesz też użyć Modifier.paint(customPainter)
do narysowania treści w funkcji kompozycyjnej w następujący sposób:
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 **/ }
Polecane dla Ciebie
- Uwaga: tekst linku jest wyświetlany, gdy JavaScript jest wyłączony
- Porównanie ImageBitmap i ImageVector {:#bitmap-vs-vector}
- Grafika w obszarze tworzenia wiadomości
- Wczytywanie obrazów {:#loading-images}