В Compose объект Painter
используется для представления чего-либо, что можно нарисовать (замена API-интерфейсов Drawable
, определенных в Android), и влияет на измерение и макет соответствующего составного объекта, который его использует. BitmapPainter
принимает ImageBitmap
, который может рисовать Bitmap
на экране.
В большинстве случаев использование painterResource()
выше возвращает правильный художник для актива (т. е. BitmapPainter
или VectorPainter
). Для получения дополнительной информации о различиях между ними прочтите раздел ImageBitmap и ImageVector .
Painter
отличается от DrawModifier
, который строго рисует в заданных ему границах и не влияет на размер или расположение компонуемого объекта.
Чтобы создать собственный рисовальщик, расширьте класс Painter
и реализуйте метод onDraw
, который обеспечивает доступ к DrawScope
для рисования пользовательской графики. Вы также можете переопределить intrinsicSize
, который будет использоваться для влияния на Composable, в котором он содержится:
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 } }
Теперь, когда у нас есть собственный Painter
, мы можем накладывать любое изображение поверх исходного изображения следующим образом:
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() )
Результат объединения двух изображений с помощью специального рисователя можно увидеть ниже:
Пользовательский рисователь также можно использовать с Modifier.paint(customPainter)
для рисования содержимого в компонуемом объекте следующим образом:
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 **/ }
Рекомендуется для вас
- Примечание: текст ссылки отображается, когда JavaScript отключен.
- ImageBitmap против ImageVector {:#bitmap-vs-vector}
- Графика в Compose
- Загрузка изображений {:#loading-images}