1

Note: Since I am using SkiaSharp I will be posting code in C#; however, I suspect that conceptually this applies to Skia in any language/environment.

Summary

I am rendering a Skia object to a canvas of a given size. I would like the canvas to be sized such that it contains the rendered object and its drop shadow. How can I determine the extra padding needed for the dropshadow given a sigmaX and sigmaY

Code Example

I am drawing a rounded rectangle to a canvas using the following code:

var paint = SKPaint 
{ 
    Color = SKColors.Red, 
    Style = SKPaintStyle.Fill
};

float sigmaX = 5;
float sigmaY = 5;

paint.ImageFilter = SKImageFilter.CreateDropShadow(
            0,
            0,
            sigmaX,
            sigmaY,
            SKColors.Black,
            SKDropShadowImageFilterShadowMode.DrawShadowAndForeground);

surface.Canvas.DrawRoundRect(
    sigmaX,
    sigmaY, 
    Width - sigmaX * 2, 
    Height - sigmaY * 2, 
    5, 5, // corner radius
    paint);

In this code I have the canvas equal to Width and Height, but I am adding a padding of sigmaX and sigmaY, because I assumed that would provide enough room for the dropshadow.

However, this does not provide enough room for the dropshadow as shown in the following screenshot (zoomed to show the sharp boundaries more clearly):

enter image description here

If I want to make the canvas contain the dropshadow I have to increase the padding for the dropshadow to about 3 times the sigma value:


...

surface.Canvas.DrawRoundRect(
    sigmaX * 3,
    sigmaY * 3, 
    Width - (sigmaX * 2 * 3), 
    Height - (sigmaY * 2 * 3), 
    5, 5, // corner radius
    paint);

This seems to provide room for the dropshadow, as shown in the following screenshot:

enter image description here

Questions

What does sigma mean, and what should my padding be given a set sigma? Is sigma referring to standard deviation, so 3 would effectively capture 99% of the shadow, the way 3 standard deviations capture 99% of samples in a normal distribution? Or is there some other correlation between width and size that I'm missing?

Victor Chelaru
  • 4,491
  • 3
  • 35
  • 49

1 Answers1

0

I'm not an expert, but if you see the source code of SkDropShadowImageFilter.cpp, you could see that the sigma is nothing but the blurriness of the shadow.

Consider it as a smudge on a pencil drawing. The greater the sigma value, the greater the smudge. Having said that keep your sigma values as anything greater than 0 i.e 0.2

You would have a crisp shadow based on the X and Y position offsets. You don't need to do anything else, no canvas sizing etc.

Working with Skia is PITA.

ppadhy
  • 332
  • 1
  • 3
  • 9