Drop shadow on a stroke rect

[gaishimo]

Is there any way to set a drop shadow on a stroke (not "fill") Rect?

I set shadow on a stroke Rect as follows, but it is not reflected. Is there no other way but to have another Fill Rect?

<RoundedRect
    style="stroke"
    color={"rgb(220, 220, 200)"}
    strokeWidth={1}
    rect={rrect(rect(10, 10, 200, 100), 20, 20)}
>
    <Shadow dx={0} dy={12} blur={20} color="rgba(0, 0, 0, 0.4)" />
</RoundedRect>

The following is a drawing with Figma that I actually want to do.

[wcandillon]

@gaishimo If you need to match Figma's semantic on more advanced examples you will need to use a path.

  const path = Skia.Path.Make();
  path.addRRect(rrect(rect(0, 0, 100, 100), 10, 10));
return (
      <Path path={path} style="stroke" strokeWidth={10} color="red">
        <Shadow dx={0} dy={0} blur={1} color="green" />
      </Path>
);

[gaishimo]

Thanks 👍

I noticed that it is not that Shadow does not work on Rect with stroke style, but that the shadow is almost unrecognizable when the border is thin (The same is true when Path is used).

It seems that when Drop Shadow is set for a Rect in Figma, it is more complicated; I exported the Rect with drop-shadow from Figma to SVG and loaded it as SVG, and was able to reproduce the same display as in Figma.

const svg = Skia.SVG.MakeFromString(
  `<svg width="240" height="140" viewBox="0 0 240 140" fill="none"
  xmlns="http://www.w3.org/2000/svg">
  <g filter="url(#filter0_d_150_211)">
    <rect x="20.5" y="10.5" width="199" height="99" rx="19.5" stroke="#D1D1D1" shape-rendering="crispEdges"/>
  </g>
  <defs>
    <filter id="filter0_d_150_211" x="0" y="0" width="240" height="140" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
      <feOffset dy="10"/>
      <feGaussianBlur stdDeviation="10"/>
      <feComposite in2="hardAlpha" operator="out"/>
      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/>
      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_150_211"/>
      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_150_211" result="shape"/>
    </filter>
  </defs>
</svg>

`,
)!

export default function App() {
  return (
    <Canvas style={styles.canvas}>
      <ImageSVG svg={svg} x={40} y={200} width={200} height={100} />
    </Canvas>
  )
}

I imagine that the same thing could be done with Skia to achieve the same display without SVG 🤔

[wcandillon]

The generated SVG code definitely map to Skia API calls, in fact, this is how we have built on own inner shadow API.

The code below was written by matching the generated SVG code from Figma:

const MakeInnerShadow = (
  Skia: Skia,
  shadowOnly: boolean | undefined,
  dx: number,
  dy: number,
  sigmaX: number,
  sigmaY: number,
  color: SkColor,
  input: SkImageFilter | null
) => {
  const sourceGraphic = Skia.ImageFilter.MakeColorFilter(
    Skia.ColorFilter.MakeBlend(Black, BlendMode.Dst),
    null
  );
  const sourceAlpha = Skia.ImageFilter.MakeColorFilter(
    Skia.ColorFilter.MakeBlend(Black, BlendMode.SrcIn),
    null
  );
  const f1 = Skia.ImageFilter.MakeColorFilter(
    Skia.ColorFilter.MakeBlend(color, BlendMode.SrcOut),
    null
  );
  const f2 = Skia.ImageFilter.MakeOffset(dx, dy, f1);
  const f3 = Skia.ImageFilter.MakeBlur(sigmaX, sigmaY, TileMode.Decal, f2);
  const f4 = Skia.ImageFilter.MakeBlend(BlendMode.SrcIn, sourceAlpha, f3);
  if (shadowOnly) {
    return f4;
  }
  return Skia.ImageFilter.MakeCompose(
    input,
    Skia.ImageFilter.MakeBlend(BlendMode.SrcOver, sourceGraphic, f4)
  );
};