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

Вы можете смешивать или накладывать исходные изображения для отображения многослойных изображений на холсте. Например, вы можете воспроизвести то, как 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)
) : 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

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

  • Использует 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 , которое использует пользовательский рисовальщик для объединения исходных изображений при рендеринге.

Результаты

Пользовательский Painter, который накладывает два изображения друг на друга.
Рис. 1. Image , в котором используется специальный Painter для наложения полупрозрачного изображения радуги на изображение собаки.

Коллекции, содержащие это руководство

Это руководство является частью тщательно подобранной коллекции быстрых руководств, охватывающих более широкие цели разработки Android:

Узнайте, как использовать яркие, привлекательные визуальные эффекты, чтобы придать вашему Android-приложению красивый внешний вид.
Сборник кратких руководств

Есть вопросы или отзывы

Перейдите на нашу страницу часто задаваемых вопросов и узнайте о кратких руководствах или свяжитесь с нами и сообщите нам свои мысли.
Перейти к часто задаваемым вопросам Оставить отзыв