Channels
#compose
Title
# compose
s
spierce7
06/14/2022, 9:54 PMHow would I use an image as a mask in compose? I have an effect that I’m drawing as a Shader, but I only want it to be applied there there are non-transparent pixels for an image. How would I do that?
r
romainguy
06/14/2022, 10:04 PMIt will work with an ALPHA_8 bitmap
One way to do this is create an ALPHA_8 bitmap, create a Canvas for it, draw your original image into it
Now you have an alpha mask
And this can be combined with other shaders to work like you want, as a mask
s
spierce7
06/14/2022, 10:09 PMcreate an ALPHA_8 bitmap, create a Canvas for it, draw your original image into itHow would I do this? I’ve never heard of an Alpha 8 bitmap
create a Canvas for itI see - Compose ImageBitmap has an Alpha 8 option.
I understand generally what you are saying, but I’m struggling to apply it. I don’t suppose you have a sample?
k
Kirill Grouchnikov
06/14/2022, 11:13 PMYour shader has access to every single pixel in the image. So it can look at the input alpha, and based on that output either transparent color or apply the filter on that pixel.
s
spierce7
06/14/2022, 11:35 PM@Kirill Grouchnikov So here’s what I have:
Copy code
val svgPainter: Painter
val shader = Shader.makeFractalNoise(
baseFrequencyX = 8.21f,
baseFrequencyY = 8.21f,
numOctaves = 3,
seed = 0.0f,
)
val shaderBrush = ShaderBrush(shader)
Canvas(
modifier = Modifier.size(width = maxWidth.dp, height = maxHeight.dp)
) {
drawRect(shaderBrush)
}svgPaintershaderBrushI’ve looked at
BlendModer
romainguy
06/14/2022, 11:38 PMI should check compose desktop
But the equivalent of Paint.setShader will use a bitmap as an alpha mask
Ie draw bitmap(theMask, thePaint) will do what you want
BlendMode will only work when you render into an intermediate transparent layer
s
spierce7
06/14/2022, 11:40 PMBut the equivalent of Paint.setShader will use a bitmap as an alpha maskSo both Skia
PaintPaintsetShaderIt looks like part of my problem is that I need to somehow get my svg
Painterok - I found out how to draw the svg painter on the canvas. I’m still not understanding how to use the shader as a mask.
Copy code
val shader = Shader.makeFractalNoise(
baseFrequencyX = 8.21f,
baseFrequencyY = 8.21f,
numOctaves = 3,
seed = 0.0f,
)
val shaderBrush = ShaderBrush(shader)
val svgSize = Size(width = maxWidth.toFloat(), height = maxHeight.toFloat())
Canvas(
modifier = Modifier.size(width = maxWidth.dp, height = maxHeight.dp)
) {
drawRect(shaderBrush, size = svgSize)
with(svgPainter) {
draw(size = svgSize)
}
}r
romainguy
06/15/2022, 12:05 AMIs the noise your mask?
s
spierce7
06/15/2022, 12:05 AMyes
The SVG is something like this.
I need to produce something like this
This was achieved by using the fractal noise as a mask on the SVG
I should be able to create the same thing in compose
r
romainguy
06/15/2022, 12:11 AMNote that you probably don’t even need the SVG for this. You could just use gradients. Anyway, there are two ways you can do this:
• Create an ARGB8888 bitmap, draw SVG, then draw the noise as a rect using the appropriate BlendMode
• Create an ALPHA_8 bitmap, draw the noise in it. Create another bitmap, draw the SVG in it. Draw the first bitmap, using the second bitmap as its brush
Since your SVG doesn’t use colors, the second method is a bit wasteful
s
spierce7
06/15/2022, 12:14 AM@romainguy I do need the SVG for this. This is being applied to a templating system on a JVM server that uses Compose to render images for customers on the fly. This is the shadow for 1 of 8 image templates that’s being rendered currently.
we were using html to generate the images, but compose can do in millis what html can do in 8-15 seconds.
r
romainguy
06/15/2022, 12:42 AMIf your goal is generating images then solution #1 I highlighted above is probably best
s
spierce7
06/15/2022, 12:42 AMI think I’ve got #1 working correctly
r
romainguy
06/15/2022, 12:43 AMCreate an ARGB8888 image, draw your SVG, then apply the mask with
DST_INCLEARCLEARs
spierce7
06/15/2022, 12:43 AM Copy code
val bitmap = ImageBitmap(width = width, height = height, config = ImageBitmapConfig.Alpha8)
.also { bitmap ->
val canvas = Canvas(bitmap)
val shaderBrush = ShaderBrush(
Shader.makeFractalNoise(
baseFrequencyX = 8.21f,
baseFrequencyY = 8.21f,
numOctaves = 3,
seed = 0.0f,
)
)
val svgSize = Size(width = width.toFloat(), height = height.toFloat())
CanvasDrawScope().draw(LocalDensity.current, LayoutDirection.Ltr, canvas, svgSize) {
with(painter) {
draw(size = svgSize)
}
drawRect(brush = shaderBrush, size = svgSize, blendMode = BlendMode.DstIn)
}
}It looks like the shadow it’s creating is black now though
It’s not maintaining the original color of the shadow
r
romainguy
06/15/2022, 12:44 AMYeah because you are creating an
ALPHA_8Make it ARGB888 or whatever is the equivalent
s
spierce7
06/15/2022, 12:45 AMah
that’s what I was about to try
Argb8888Works perfectly. I love compose so much.
Thanks @romainguy and thanks @Kirill Grouchnikov for your blog posts on Skia shaders. They really helped me out here!
s
Stylianos Gakis
06/15/2022, 6:14 AMI can't help but think what you're doing here Scott sounds super interesting but very hard to follow from a slack thread. But I feel like I'd love to see exactly what you're trying to do. If you ever have some final snippet lying around of what you're doing or you're gonna write up a blog about this I'd be super interested in reading it!
💯 1
➕ 3
18 Views