Question the next. In iOS, with Layers, I can have...

# compose

[Travis Griggs]

Question the next. In iOS, with Layers, I can have a mask for a layer that is any kind of other layer. Regards of the color content of the masking layer, the alpha values are what are used to mask the contents of the original. Compose modifiers have shapes and alpha, but I don't see anything were one could use, say a draw scope, to dynamically "draw" the mask of original. Is there another way to achieve this?

(my goal is to have a Text that gradually fades with a gradient; so far, the only way I've figured to do it is by overdrawing the gradient over the text, but this requires knowledge of the color that is below the text and an assumption that it is uniform)

[romainguy]

You don't need to know the color. To achieve this you would render the text into a layer and then draw a gradient from full opaque to full transparent using DstIn or SrcOut blend mode (I always forget which, it depends on whether you draw the gradient before or after the text). That's how you can do alpha masking like you are describing

[Travis Griggs]

So, is this that kind of pattern?

.drawWithContent {
    val brush = Brush.verticalGradient(listOf(Color.Cyan, Color.Orange))
    drawContent()
    drawRect(brush, blendMode = BlendMode.SrcAtop)
},

does the internal drawContent() there draw to an intermediate layer?

[romainguy]

No you want a graphicsLayer with an offscreen compositing strategy

[Travis Griggs]

OK... i threw some darts, but i'm missing a light bulb moment here still.

Got

.graphicsLayer { 
    compositingStrategy = CompositingStrategy.Offscreen
}

I've applied that to my Text (it's actually a LazyList with a bunch of Texts in it). I can make my gradient:

Brush.verticalGradient(
    0f to Color.Red.copy(alpha = 0f ),
    padRows.toFloat() / lineCount to Color.Blue.copy(alpha = 1f),
    (padRows + 1).toFloat() / lineCount to Color.Blue.copy(alpha = 1f),
    1f to Color.Green.copy(alpha = 0.0f)
)

It's not clear to me how I get my offscreen list of Texts to draw "through" my gradient (dstIn or dstOut). Do I use any of the "drawWith" things for this?

[Travis Griggs]

Here's what appears to work, though my confidence that I didn't just "get lucky" is only so-so:

LazyList(modifier.graphicsLayer {
    compositingStrategy = CompositingStrategy.Offscreen
}
.drawWithContent {
    drawContent()
    drawRect(brush, blendMode = BlendMode.SrcIn)
},...

[romainguy]

That's the way :)

[Travis Griggs]

thanks for you help and nudges @romainguy