SkiaSharp SKImageFilter.CreateDistantLitDiffuse clipped

Question

I'm trying to reproduce lightning effect similar to this one https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/graphics/skiasharp/effects/image-filters#lighting-effects, but my content is a SKPath as opposed to Text

What I'd like to achieve is for the effect to only change colour of my Path (stroke with specific width), as opposed to everything around it (background)

I've tried clipping the canvas with my Path, but that does not work because I need the path to have Stroke with specific Width, and that cannot be reproduced by transforming a path.

As you can see on the attached picture, the SKImageFilter.CreateDistantLitDiffuse effect it applied to full canvas, and I'd only like to apply it to the SKPath object

Any ideas?

Answer 1

After more research, I've found Porter Duff blend modes, and was essentially able to clip the canvas to only the part that I cared about with simple BledMode:

using (var paint = new SKPaint())  
{  
    paint.BlendMode = SKBlendMode.DstIn;  
    canvas.DrawImage([instance of SKImage containing the content I wanted to use as clip], new SKPoint(), paint);  
}  

More info at https://skia.org/docs/user/api/skblendmode_overview/

@JessieZhang-MSFT

Answer 2

Hello,

Welcome to our Microsoft Q&A platform!

What I'd like to achieve is for the effect to only change colour of my Path (stroke with specific width)

As a workaround, I think you can use the SKImageFilter.CreateDropShadow to achieve this.

Take the official sample SkiaSharpForms/Demos for example, Specially，pay attention to page DropShadowExperimentPage.xaml.cs,

The code is

    void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)  
    {  
        SKImageInfo info = args.Info;  
        SKSurface surface = args.Surface;  
        SKCanvas canvas = surface.Canvas;  

        canvas.Clear();  

        // Get values from sliders  
        float dx = (float)dxSlider.Value;  
        float dy = (float)dySlider.Value;  
        float sigmaX = (float)sigmaXSlider.Value;  
        float sigmaY = (float)sigmaYSlider.Value;  

        using (SKPaint paint = new SKPaint())  
        {  
            // Set SKPaint properties  
            paint.TextSize = info.Width / 7;  
            paint.Color = SKColors.Blue;  
            paint.ImageFilter = SKImageFilter.CreateDropShadow(  
                                    dx,  
                                    dy,  
                                    sigmaX,  
                                    sigmaY,  
                                    SKColors.Red,  
                                    SKDropShadowImageFilterShadowMode.DrawShadowAndForeground);   

            SKRect textBounds = new SKRect();  
            paint.MeasureText(TEXT, ref textBounds);  

            // Center the text in the display rectangle  
            float xText = info.Width / 2 - textBounds.MidX;  
            float yText = info.Height / 2 - textBounds.MidY;  

            canvas.DrawText(TEXT, xText, yText, paint);  
        }  
    }  

When we change the Horizontal offset or Vertical offset, we can call followig code for the SKCanvasView:

  canvasView.InvalidateSurface();  

The result is:

Best Regards,

Jessie Zhang

---
If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our [documentation][6] to enable e-mail notifications if you want to receive the related email notification for this thread.