Shadows on SkiaSharp shape

I'm working with SkiaSharp shapes, and I can't put a shadow behind a shape. Does anyone have an idea how to get it done in xamarin.forms?

Best Answer

Answers

  • mattleibowmattleibow ZAXamarin Team Xamurai

    @seanyda is correct, but there is a image filter that has the word shadow in the name. I have not had a look at what this does, but you can see it here: SKImageFilter.CreateDropShadow.

  • ashleyvanlaerashleyvanlaer Member ✭✭

    And then again, how can I blur a shape?

  • JonesieJonesie Member ✭✭

    @ashleyvanlaer said:
    And then again, how can I blur a shape?

    SKImageFilter.CreateDropShadow seems to work with shapes.

  • dsynodsyno Member ✭✭
    edited June 2018

    Here's how to create a drop shadow (and use any of the other SKImageFilter methods).

    using (var surface = SKSurface.Create(...))
    using (var paint = new SKPaint())
    {
        SKColor shadowColor = new SKColor(0, 0, 0, 70); // black with alpha transparency set to 70
    
        // set drop shadow with position x/y of 2, and blur x/y of 4
        paint.ImageFilter = SKImageFilter.CreateDropShadow(2, 2, 4, 4, shadowColor,
                SKDropShadowImageFilterShadowMode.DrawShadowAndForeground);
    
        // now draw something on the surface, and the drop shadow will automatically appear
        surface.Canvas.DrawBitmap(..., 0, 0, paint);
    }
    
  • ChristophHuberChristophHuber USMember ✭✭

    but the result is not nice. How to draw a nice shadow like this:

  • SYLENDRABABUJRSYLENDRABABUJR USMember ✭✭

    Hi @dsyno @ChristophHuber @Jonesie @mattleibow @seanyda ,

    I created one Rectangle Shadow View using Skiasharp. I wanted to add child elements inside this view but It is not working as expected.
    public class ShadowView : ContentView
    {
    public ShadowView()
    {

        SKCanvasView sKCanvasView = new SKCanvasView();
        sKCanvasView.PaintSurface += OnPaintSurface;
        Content = sKCanvasView;
    
    }
    
    void OnPaintSurface(object sender, SKPaintSurfaceEventArgs e)
    {
        var skCanvas = e.Surface.Canvas;
        var skinfo = e.Info;
        skCanvas.Clear();
    
    
        var RectangleStyleFillShadowColor = new SKColor(255, 0, 0, 255);
    
    
        var RectangleStyleFillShadow = SKImageFilter.CreateDropShadow(0f, 0f, 20f,20f, RectangleStyleFillShadowColor, SKDropShadowImageFilterShadowMode.DrawShadowAndForeground, null, null);
    
    
        var RectangleStyleFillColor = new SKColor(255, 255, 255, 255);
    
    
        var RectangleStyleFillPaint = new SKPaint()
        {
            Style = SKPaintStyle.Fill,
            Color = RectangleStyleFillColor,
            BlendMode = SKBlendMode.SrcOver,
            IsAntialias = true,
            ImageFilter = RectangleStyleFillShadow
        };
        var top = (float)(skinfo.Height * 0.1);
        var left = (float)(skinfo.Width * 0.1);
        var bottom = (float)(skinfo.Height);
        var right = (float)(skinfo.Width * 0.1);
        skCanvas.DrawRect(new SKRect(20f, 20f, skinfo.Width-20, skinfo.Height-20), RectangleStyleFillPaint);
    
    
    }
    

    }
    Xaml: Here the border is not displaying

Sign In or Register to comment.