Using BackdropFilter and Blur with Offscreen api

[raminious]

Is it possible to use BackdropFilter and Blur with Offscreen Api?

<BackdropFilter clip={path} invertClip />

<Blur blur={blur} mode={mode} />

const offscreen = Skia.Surface.MakeOffscreen(1000, 1000)
const canvas = offscreen.getCanvas()

// ??

return offscreen.makeImageSnapshot().encodeToBase64()

[wcandillon]

yes that's a good question,

This is how you would do it:

canvas.clip(...)
const imageFilter = Skia.ImageFilter.MakeBlur(...);
canvas.saveLayer(undefined, null, imageFilter);
canvas.restore();

[raminious]

Thank you!!!

[raminious]

Hi @wcandillon

Could you also explain how to use nested effects such as:

<BackdropBlur blur={2} clip={c1}>
  <Fill color="rgba(255, 0, 0, 0.5)" />
</BackdropBlur>

<BackdropBlur blur={4} clip={c2} invertClip={true}>
  <Fill color="rgba(255, 255, 255, 0.3)" />
</BackdropBlur>

That is, how can one add Fill to a BackdropBlur?
canvas.drawRect is what I tried, but it affects another BackdropBlur.

I appreciate your help ❤️

[raminious]

@wcandillon This approach worked for me. I made an extra filter and put it through the first one. It makes sense, but I have to change RGB to ColorMatrix first, which is a problem. Do you know of a tool or way to use RGB color directly?

const f1 = Skia.ImageFilter.MakeColorFilter(
  Skia.ColorFilter.MakeMatrix([
    0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0,
  ]),
  null,
)

canvas.clipPath(circle.value, ClipOp.Difference, true)

const filter = Skia.ImageFilter.MakeBlur(10, 10, TileMode.Clamp, f1)

canvas.saveLayer(undefined, null, filter)
canvas.restore()

ps:

ColorFilter.MakeBlend works.

Skia.ImageFilter.MakeColorFilter(
  Skia.ColorFilter.MakeBlend(
    Skia.Color('rgba(255, 0, 0, 0.5)'),
    BlendMode.Src,
  ),
  null,
)