Hi all 👋 In certain cases, I would like to draw an image on top of a Text such that the image scales to fit the height and width of the Text component. I'm trying the following approach but I cannot find a way for the image to cover the whole Text component. Any pointers would be really helpful. See video in thread 🧵

Text(
    text = text,
    color = Color.Transparent,
    modifier = modifier.drawWithContent {
        drawContent()
        drawImage(image = bitmap, colorFilter = ColorFilter.tint(tintColor, BlendMode.SrcIn))
    },
)

drawImage(dstSize = size)

or whatever other adjustments you want to do too preserve aspect ratio

image_on_text.webm

Are there any performance issues you are facing?

@efemoney not particularly. I noticed another modifier 👉

drawWithCache

and was wondering if there was a way to use that instead for better performance

For your particular case there is nothing to “cache”. The difference is that the withCache modifier gives you a lambda where you can first allocate (and hence cache) some objects that are then used across different runs of the actual draw operation. So expensive calculations, usually size-based calculations, can be done once and reused and will be rerun when the size changes for instance