Эта страница переведена с помощью Cloud Translation API.

Отображение многослойных изображений на холсте

Вы можете смешивать или накладывать исходные изображения для отображения многослойных изображений на холсте. Например, вы можете воспроизвести то, как Android Framework генерирует значки приложений, объединив отдельные элементы фона и переднего плана. Для отображения многослойных изображений необходимо сделать следующее:

Наслаивайте изображения на холст.
Наложите источник.

Совместимость версий

Для этой реализации требуется, чтобы в minSDK вашего проекта был установлен уровень API 21 или выше.

Зависимости

Наслаивайте изображения на холст

Следующий код накладывает два исходных изображения друг на друга, визуализируя смешанное изображение на холсте:

     )                       

   

           }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) class="devsite-syntax-w"> : 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 } class="devsite-github-link nocode no-select">CustomPainterSnippets.kt

Ключевые моменты о коде

Использует OverlayImagePainter — специальную реализацию Painter , которую можно использовать для наложения изображений на исходное изображение. Режим наложения управляет тем, как объединяются изображения. Первое изображение не перезаписывает ничего другого, поэтому режим наложения не требуется. Режим наложения Overlay второго изображения перезаписывает области первого изображения, которые покрыты вторым изображением.
DrawScope.onDraw() переопределяется, и в этой функции два изображения накладываются друг на друга.
intrinsicSize переопределяется, чтобы правильно сообщать внутренний размер объединенного изображения.

Наложение исходного изображения

С помощью этого специального художника 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()
)CustomPainterSnippets.kt

Ключевые моменты о коде

Каждое из изображений, подлежащих объединению, загружается как экземпляры ImageBitmap перед объединением с помощью OverlayImagePainter .
Комбинированные изображения визуализируются с помощью компонуемого Image , которое использует пользовательский рисовальщик для объединения исходных изображений при рендеринге.