fix: BoxShadow color with opacity no longer get ignored (#3093)

Author: Titozzz

packages/skia/cpp/api/recorder/Drawings.h

@@ -418,7 +418,7 @@ class BoxCmd : public Command {
         SkPaint shadowPaint;
         shadowPaint.setAntiAlias(true);
         shadowPaint.setColor(shadow.color.value_or(SK_ColorBLACK));
-        shadowPaint.setAlphaf(opacity);
+        shadowPaint.setAlphaf(opacity * shadowPaint.getAlphaf());
         shadowPaint.setMaskFilter(SkMaskFilter::MakeBlur(
             SkBlurStyle::kNormal_SkBlurStyle, shadow.blur, true));
 
@@ -442,7 +442,7 @@ class BoxCmd : public Command {
         SkPaint shadowPaint;
         shadowPaint.setAntiAlias(true);
         shadowPaint.setColor(shadow.color.value_or(SK_ColorBLACK));
-        shadowPaint.setAlphaf(opacity);
+        shadowPaint.setAlphaf(opacity * shadowPaint.getAlphaf());
         shadowPaint.setMaskFilter(SkMaskFilter::MakeBlur(
             SkBlurStyle::kNormal_SkBlurStyle, shadow.blur, true));
 

packages/skia/src/__tests__/snapshots/box/box-shadow-opacity.png

@@ -80,4 +80,26 @@ describe("Box", () => {
     );
     checkImage(img, "snapshots/box/box-stroke.png");
   });
+
+  it("should draw a shadow with opacity", async () => {
+    const { rect } = importSkia();
+    const { width } = surface;
+    const size = width / 2;
+    const img = await surface.draw(
+      <>
+        <Fill color="white" />
+        <Box box={rect(size / 2, size / 2, size, size)} color="red">
+          <BoxShadow
+            dx={0}
+            dy={0}
+            blur={5}
+            spread={10}
+            inner
+            color={"rgba(0, 0, 255, 0.5)"}
+          />
+        </Box>
+      </>
+    );
+    checkImage(img, "snapshots/box/box-shadow-opacity.png");
+  });
 });

packages/skia/src/renderer/__tests__/e2e/Box.spec.tsx

@@ -30,7 +30,7 @@ export const drawBox = (ctx: DrawingContext, command: BoxCommand) => {
       const { color = "black", blur, spread = 0, dx = 0, dy = 0 } = shadow;
       const lPaint = Skia.Paint();
       lPaint.setColor(processColor(Skia, color));
-      lPaint.setAlphaf(paint.getAlphaf() * opacity);
+      lPaint.setAlphaf(lPaint.getAlphaf() * opacity);
       lPaint.setMaskFilter(
         Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)
       );
@@ -48,7 +48,7 @@ export const drawBox = (ctx: DrawingContext, command: BoxCommand) => {
       canvas.clipRRect(box, ClipOp.Intersect, false);
       const lPaint = Skia.Paint();
       lPaint.setColor(Skia.Color(color));
-      lPaint.setAlphaf(paint.getAlphaf() * opacity);
+      lPaint.setAlphaf(lPaint.getAlphaf() * opacity);
 
       lPaint.setMaskFilter(
         Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)

packages/skia/src/sksg/Recorder/commands/Box.ts

@@ -1,9 +1,6 @@
 import {
-  deflate,
   enumKey,
   fitRects,
-  inflate,
-  NodeType,
   processCircle,
   processColor,
   processPath,
@@ -12,8 +9,6 @@ import {
 } from "../../../dom/nodes";
 import type {
   AtlasProps,
-  BoxProps,
-  BoxShadowProps,
   CircleProps,
   DiffRectProps,
   DrawingNodeProps,
@@ -38,18 +33,13 @@ import { saturate } from "../../../renderer/processors";
 import type { SkPoint, SkRSXform } from "../../../skia/types";
 import {
   BlendMode,
-  BlurStyle,
-  ClipOp,
   FillType,
   FilterMode,
   isCubicSampling,
-  isRRect,
   MipmapMode,
   PointMode,
   VertexMode,
 } from "../../../skia/types";
-import type { Node } from "../../Node";
-import { materialize } from "../../utils";
 import type { DrawingContext } from "../DrawingContext";
 
 export const drawLine = (ctx: DrawingContext, props: LineProps) => {
@@ -64,61 +54,6 @@ export const drawOval = (ctx: DrawingContext, props: OvalProps) => {
   ctx.canvas.drawOval(rect, ctx.paint);
 };
 
-export const drawBox = (
-  ctx: DrawingContext,
-  props: BoxProps,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  children: Node<any>[]
-) => {
-  "worklet";
-  const { paint, Skia, canvas } = ctx;
-  const { box: defaultBox } = props;
-  const opacity = paint.getAlphaf();
-  const box = isRRect(defaultBox) ? defaultBox : Skia.RRectXY(defaultBox, 0, 0);
-  const shadows = children
-    .map((node) => {
-      if (node.type === NodeType.BoxShadow) {
-        return materialize(node.props);
-      }
-      return null;
-    })
-    .filter((n): n is BoxShadowProps => n !== null);
-  shadows
-    .filter((shadow) => !shadow.inner)
-    .map((shadow) => {
-      const { color = "black", blur, spread = 0, dx = 0, dy = 0 } = shadow;
-      const lPaint = Skia.Paint();
-      lPaint.setColor(processColor(Skia, color));
-      lPaint.setAlphaf(paint.getAlphaf() * opacity);
-      lPaint.setMaskFilter(
-        Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)
-      );
-      canvas.drawRRect(inflate(Skia, box, spread, spread, dx, dy), lPaint);
-    });
-
-  canvas.drawRRect(box, paint);
-
-  shadows
-    .filter((shadow) => shadow.inner)
-    .map((shadow) => {
-      const { color = "black", blur, spread = 0, dx = 0, dy = 0 } = shadow;
-      const delta = Skia.Point(10 + Math.abs(dx), 10 + Math.abs(dy));
-      canvas.save();
-      canvas.clipRRect(box, ClipOp.Intersect, false);
-      const lPaint = Skia.Paint();
-      lPaint.setColor(processColor(Skia, color));
-      lPaint.setAlphaf(paint.getAlphaf() * opacity);
-
-      lPaint.setMaskFilter(
-        Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)
-      );
-      const inner = deflate(Skia, box, spread, spread, dx, dy);
-      const outer = inflate(Skia, box, delta.x, delta.y);
-      canvas.drawDRRect(outer, inner, lPaint);
-      canvas.restore();
-    });
-};
-
 export const drawImage = (ctx: DrawingContext, props: ImageProps) => {
   "worklet";
   const { image, sampling } = props;