Support negative shadow spread value

[AmjadHD]

I want to create a shadow generated by this CSS:

{
 box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.4);
}

I get this error:

masks.nim(217) spread
Error: unhandled exception: Cannot apply negative spread [PixieError]

[treeform]

This is some thing we still need to add.

[AmjadHD]

After playing around with the box-shadow property and examining how spread affects the shadow of a rounded rect, It turned out to me, that a negative spread of -n crops n pixels from each side of the rect.
So to make the needed shadow I subtracted 2*2 px from both the width and the height and 2 from the corner radius.
changed the spread argument to 0 and left everything else as is.

[treeform]

Yes if you are shadowing the rect it should work. But it still would be nice to get negative spread to work.

[AmjadHD]

Hi, @treeform thanks for sorting this out
I have this code in which drawOverlayShadow draws the forementioned shadow for a 29x29px rect with 6px corner radius.
and drawOverlayShadowSpreadWorkaround where I implement the workaround mentioned in #372 (comment)
I draw the same shadow as drawOverlayShadow with figma.

import std/strformat
import pkg/pixie


proc drawOverlayShadow(scale: int, suffix: string) =
 let side = 47 * scale
 let image = newImage(side, side)
 let scalef = scale.float32

 let r = 6f32
 let path = newPath()
 path.roundedRect(rect(9, 3, 29, 29), r, r, r, r)

 image.fillPath(path, "white", scale(vec2(scalef, scalef)))

 image.shadow(
 offset = vec2(0, 6) * scalef,
 spread = -2 * scalef,
 blur = 12 * scalef,
 color = color(0, 0, 0, 0.4)
 ).writeFile(&"{assetsPath}/overlay_shadow_negative_spread{suffix}.png")

proc drawOverlayShadowSpreadWorkaround(scale: int, suffix: string) =
 let side = 47 * scale
 let image = newImage(side, side)
 let scalef = scale.float32

 let r = 4f32
 let path = newPath()
 path.roundedRect(rect(11, 5, 25, 25), r, r, r, r)

 image.fillPath(path, "white", scale(vec2(scalef, scalef)))

 image.shadow(
 offset = vec2(0, 6) * scalef,
 spread = 0f32,
 blur = 12 * scalef,
 color = color(0, 0, 0, 0.4)
 ).writeFile(&"{assetsPath}/overlay_shadow_workaround{suffix}.png")


let f = readImage(&"{assetsPath}/overlay_shadow_figma.png")
var d = diff(readImage(&"{assetsPath}/overlay_shadow_negative_spread.png"), f)
echo d[0] # 0.1987413316965103
d[1].writeFile(&"{assetsPath}/diff_ns_f.png")

d = diff(readImage(&"{assetsPath}/overlay_shadow_workaround.png"), f)
echo d[0] # 0.1213396191596985
d[1].writeFile(&"{assetsPath}/diff_wa_f.png")

• why is there a difference (~20%) between the figma export and negative spread version ?
• why is the workaround closer to the figma export ?

overlay_shadow_figma:

overlay_shadow_negative_spread:

overlay_shadow_workaround:

diff_ns_f:

diff_wa_f: