Hey guys I want to mask text with an Image in Comp...

# multiplatform

[Shivam Dhuria]

Hey guys
I want to mask text with an Image in Compose Multiplatform like the Image below
any way to implement this?

[Aniket Shinde]

Here is full solution : I had already worked on this

val image = ImageBitmap.imageResource(id = R.drawable.download_demo) // your image

Text(
    text = "LION",
    fontSize = 100.sp,
    fontWeight = FontWeight.ExtraBold,
    letterSpacing = (-2).sp, // optional, tighter look
    modifier = Modifier
        // draw text offscreen so blend mode works correctly
        .graphicsLayer { compositingStrategy = CompositingStrategy.Offscreen }
        .drawWithCache {
            val dst = IntSize(size.width.roundToInt(), size.height.roundToInt())
            onDrawWithContent {
                // 1) draw the text (destination)
                drawContent()
                // 2) draw the image using SrcIn so it shows only where text exists
                drawImage(
                    image = image,
                    dstSize = dst,
                    blendMode = BlendMode.SrcIn
                )
            }
        }
)

[Aniket Shinde]

Output :

[Aniket Shinde]

@Shivam Dhuria

[Shivam Dhuria]

that worked
thanks a lot!

[Anonymike]

Very kind of you @Aniket Shinde to provide a full solution like that 👍

[Aniket Shinde]

Always happy to help 🙂