I'm trying the saveLayer and blendMode (I'm using this for the first time I've never used that befor...

# compose

[Kazemihabib1996]

I'm trying the saveLayer and blendMode (I'm using this for the first time I've never used that before even in the previous android UIToolkit). So I followed this tutorial that's originally written for flutter https://stackoverflow.com/a/59650400/4146943
and I ended up with this code in jetpack compose

@Composable
fun testBlending2(modifier: Modifier = Modifier) {

    val paint = remember { Paint() }


    Canvas(modifier = modifier, onCanvas = {
        save()
        val rect = Rect(0f, 0f, 100f, 100f)
        drawRect(rect, paint.apply { color = Color.Red })
        saveLayer(Rect.fromLTWH(0f, 0f, size.width.value, size.height.value), paint.apply { BlendMode.multiply })

        drawRect(
                rect.shift(Offset(20f, 20f)),
                paint.apply { color = Color.Blue }
        )
        restore()
        restore()
    })
}

It's supposed to be
but it just produces this image:

https://i.stack.imgur.com/q3In0.png▾

What am I doing wrong?

[Kazemihabib1996]

produced Image:

[romainguy]

Note that you don’t need saveLayer() at all in this example

[romainguy]

Anyway your problem is most likely that you should be writing:

[romainguy]

paint.apply { blendMode = BlendMode.multiply }

[romainguy]

You are not assigning the BlendMode to anything

[Kazemihabib1996]

OOOPS, 😩 what a mistake 😞 how I didn't notice that
Thank you

[Kazemihabib1996]

@romainguy I want to create a whole inside the below shape

@Composable
fun donat(modifier: Modifier = Modifier) {

    val icingPaint = remember {
        Paint().apply {
            asFrameworkPaint().pathEffect = ComposePathEffect(CornerPathEffect(40f), DiscretePathEffect(60f, 25f))
            color = Color(0xFF53250F)
        }
    }

    Canvas(modifier = modifier, onCanvas = {
        val center = Offset(size.minDimension.value / 2, size.minDimension.value / 2)
        val holePath = Path().apply {
            addOval(Rect.fromCircle(center, size.minDimension.value / 6))
        }

        val icing = Path().apply {
            addOval(Rect.fromCircle(center, size.minDimension.value / 2.5f))
            op(this, holePath, operation = PathOperation.difference).also {
                Log.d("OP RESULT", it.toString())
            }
        }


        drawPath(icing, icingPaint)
    })
}

but it doesn't work, but it works without asFrameworkPaint().pathEffect = ComposePathEffect(CornerPathEffect(40f), DiscretePathEffect(60f, 25f))

[Kazemihabib1996]

without asFrameworkPaint().pathEffect = ComposePathEffect(CornerPathEffect(40f), DiscretePathEffect(60f, 25f))

[Kazemihabib1996]

also I can create the whole with nativeCanvas.clipPath(holePath.asAndroidPath(), Region.Op.DIFFERENCE)
with out removing that pathEffect.

[romainguy]

It’s probably because your path effect is too wide and covering the hole

[Kazemihabib1996]

I changed it to asFrameworkPaint().pathEffect = DiscretePathEffect(1f, 1f)
but didn't help.

[romainguy]

Not sure why you keep mentioning Flutter 🙂

[romainguy]

saveLayer basically creates a temporary render target

[romainguy]

think of it like a transparent bitmap

[romainguy]

and some of the blending modes (like DstOut) may only provide the desired results you want when starting from a transparent content

[romainguy]

The window of your app is opaque by default, so the alpha value is set to 1

[romainguy]

The Android docs show what the different alpha compositing and blend modes do: https://developer.android.com/reference/android/graphics/PorterDuff.Mode

[romainguy]

Anyway, so because multiply is not an alpha compositing mode, it works without saving a layer first

[romainguy]

but DstOut does alpha composition, hence the saveLayer

[romainguy]

Note that saveLayer calls have a cost (memory and rendering performance) so use them sparingly (or at least watch performance)

[romainguy]

Also, you don’t need the restore simply because Android does have its own restores to prevent mistakes from apps

[romainguy]

But better to have a restore for every save

[romainguy]

Oh and it wouldn’t make sense to call saveLayer for just one of the draw calls

[Kazemihabib1996]

@romainguy Thank you for your nice explanation 👍 I got it finally.

And about the flutter 😂 because in BlendMode.kt there are links to flutter docs and also the docs in that file is equal to to <https://api.flutter.dev/flutter/dart-ui/BlendMode-class.html>
that was reason for using flutter docs and samples for learning this stuff 😁

[romainguy]

Ah, that explains 🙂

[romainguy]

We should fix that :0