How to draw a polygon with its background content blurred in skia?

[Lucida]

I have tried something like SkImageBlur and SkRuntimeEffect, but it seems that it's not a trival work.

Figma renders:

 

[John Stiles]

Take a look at this example code for a demonstration of applying filters on top of an image:
https://github.com/google/skia/blob/main/gm/imagefilters.cpp#L153

The example uses clipRRect, but clipPath should work equally well.

[Lucida]

Thanks a lot!

It works. Before your answer, I save the background and write blur shader manually, it's really a mess. I dont' known there is already a dedicated parameter (backdrop in SaveLayerRec) for post processing. 

[craste...@gmail.com]

It would be helpful if there was a fiddle

[John Stiles]

We've got tons of example test-suite slides; maintaining a Fiddle-based copy of each one would actually be a fair amount of work! However, it should be super straightforward to port this particular slide over if you would like to try.

--
You received this message because you are subscribed to the Google Groups "skia-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to skia-discuss...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/6cb999cb-a09a-4984-80d9-32b792086d56n%40googlegroups.com.

[Joe]

Is there a way to achieve this w/o using a clip this way? I'd like a generic way of having this kind of effect for any drawing over the background. So essentially, having the "clip" be based on the draw operation that happens above the saved layer before restore. So this would be used to fill shapes/text and their strokes. Is this possible in a generic way w/o having to know exactly what shape is being draw to try and provide a matching clip?

[Florin Malita]

On Thu, Dec 5, 2024 at 12:07 AM Joe <nick...@gmail.com> wrote:

Is there a way to achieve this w/o using a clip this way? I'd like a generic way of having this kind of effect for any drawing over the background. So essentially, having the "clip" be based on the draw operation that happens above the saved layer before restore. So this would be used to fill shapes/text and their strokes. Is this possible in a generic way w/o having to know exactly what shape is being draw to try and provide a matching clip?

When using saveLayer's backdrop filter mechanism, the whole layer is initialized with the previous layer content.  So you must then "carve out" the actual shape somehow, lest it will overwrite everything on restore.

Clipping is the natural option, and could be generalized to any draw primitive (start with the draw geometry, and apply the stroke effects, etc).  It does fall short if the draw op doesn't have sharp/well determined edges (e.g. the content itself is blurred and you expect blurred edges to be blended/modulated).

The other option is to use the draw op content as a mask, via a second layer: draw the content into a nested layer, which then acts as a mask for the backdrop filter layer on restore (blend mode: kDstIn).

https://fiddle.skia.org/c/31432746007f55a7e0fd0e8ee5d982e6

That removes the clip and also modulates based on content alpha, but could be slower due to the extra saveLayer.

 

On Friday, October 13, 2023 at 9:05:30 AM UTC-7 johns...@google.com wrote:

We've got tons of example test-suite slides; maintaining a Fiddle-based copy of each one would actually be a fair amount of work! However, it should be super straightforward to port this particular slide over if you would like to try.

On Fri, Oct 13, 2023 at 11:56 AM craste...@gmail.com <craste...@gmail.com> wrote:

It would be helpful if there was a fiddle

On Thursday, October 12, 2023 at 4:06:19 PM UTC-7 johns...@google.com wrote:

Take a look at this example code for a demonstration of applying filters on top of an image:
https://github.com/google/skia/blob/main/gm/imagefilters.cpp#L153

The example uses clipRRect, but clipPath should work equally well.

On Thursday, October 12, 2023 at 9:15:12 AM UTC-4 Lucida wrote:

I have tried something like SkImageBlur and SkRuntimeEffect, but it seems that it's not a trival work.

Figma renders:

 

--
You received this message because you are subscribed to the Google Groups "skia-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to skia-discuss...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/6cb999cb-a09a-4984-80d9-32b792086d56n%40googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "skia-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to skia-discuss...@googlegroups.com.

To view this discussion visit https://groups.google.com/d/msgid/skia-discuss/592137ef-8ec0-4ed2-83a6-821092cb725en%40googlegroups.com.

[Joe]

this makes sense. i'm just not sure how to use an arbitrary shape (say w/ stroke) for clipping. i see various clip functions (i.e. clipRect, clipRRect, ...), but nothing that allows me to clip by a shape w/ stroke. also, how does this apply to text? i'm using paragraphs to draw text and would like to apply this effect to them, either entirely or to sub areas via the paint in paragraph styles.

[Joe]

i'm wondering if i can accomplish this with a single ImageFilter, or a Shader. the reason is i really want to use this "frosted glass" as a re-usable paint that can be applied to fills, strokes and to text (via Paragraph also). so i'd like something i can just apply to a Paint like i can do with SKShaders.makeLinearGradient and apply it to the Paint.shader property.

is this fairly straightforward to do? i don't have any experience working w/ skia Shaders. so hoping there're off-the-shelf shaders i can compose to get this effect etc. if needed.

really appreciate any help with this. been stuck trying to do what i know is achievable for a while just b/c of my lack of skia knowledge.