Afficher des images superposées sur un canevas

Vous pouvez mélanger ou superposer des images sources pour afficher des images superposées sur un canevas. Par exemple, vous pouvez reproduire la façon dont le framework Android génère des icônes d'application en combinant des drawables d'arrière-plan et de premier plan distincts. Pour afficher des images superposées, procédez comme suit:

  • Empilez des images sur un canevas.
  • Superposez la source.

Compatibilité des versions

Cette implémentation nécessite que la version minimale du SDK de votre projet soit définie sur le niveau d'API 21 ou supérieur.

Dépendances

Empilez des images sur un canevas

Le code suivant superpose deux images sources, ce qui génère une image mélangée sur le canevas:

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

Points clés concernant le code

  • Utilise OverlayImagePainter, qui est une implémentation personnalisée de Painter que vous pouvez utiliser pour superposer des images à l'image source. Le mode de fusion contrôle la façon dont les images sont combinées. La première image ne remplace rien d'autre. Aucun mode de fusion n'est donc nécessaire. Le mode de fusion Overlay de la deuxième image écrase les zones de la première image qui sont recouvertes par la deuxième image.
  • DrawScope.onDraw() est ignoré et les deux images sont superposées dans cette fonction.
  • intrinsicSize est remplacé pour indiquer correctement la taille intrinsèque de l'image combinée.

Superposer l'image source

Avec ce peintre personnalisé Painter, vous pouvez superposer une image sur l'image source comme suit:

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

Points clés concernant le code

  • Les images à combiner sont chacune chargées en tant qu'instances ImageBitmap avant d'être combinées à l'aide de OverlayImagePainter.
  • Les images combinées sont affichées par un composable Image qui utilise le peintre personnalisé pour combiner les images sources lors du rendu.

Résultats

Painter personnalisé superposant une image au-dessus d&#39;une autre
Figure 1: Image qui utilise un Painter personnalisé pour superposer une image arc-en-ciel semi-transparente à l'image d'un chien.

Collections contenant ce guide

Ce guide fait partie de ces collections de guides rapides sélectionnées qui couvrent des objectifs de développement Android plus larges:

Découvrez des techniques pour utiliser des visuels lumineux et attrayants afin de donner à votre application Android une belle apparence.
Collection de guides rapides

Vous avez des questions ou des commentaires ?

Consultez notre page des questions fréquentes et découvrez les guides rapides, ou contactez-nous pour nous faire part de vos commentaires.
Accéder aux questions fréquentes Envoyer des commentaires