Merge pull request #1751 from VisActor/fix/group-setShadowBlendStyle

fix: fix issue with group setShadowBlendStyle not work on background
VisActor · Feb 21, 2025 · fbb36b0 · fbb36b0
2 parents 25a97e0 + e519211
commit fbb36b0
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/common/changes/@visactor/vrender-core/fix-group-setShadowBlendStyle_2025-02-21-09-02.json b/common/changes/@visactor/vrender-core/fix-group-setShadowBlendStyle_2025-02-21-09-02.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-core",
+      "comment": "fix: fix issue with group setShadowBlendStyle not work on background",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vrender-core"
+}
diff --git a/packages/vrender-core/src/render/contributions/render/group-render.ts b/packages/vrender-core/src/render/contributions/render/group-render.ts
@@ -136,6 +136,9 @@ export class DefaultCanvasGroupRender implements IGraphicRender {
       doStroke
     };
 
+    // shadow
+    context.setShadowBlendStyle && context.setShadowBlendStyle(group, group.attribute, groupAttribute);
+
     this._groupRenderContribitions.forEach(c => {
       if (c.time === BaseRenderContributionTime.beforeFillStroke) {
         // c.useStyle && context.setCommonStyle(group, group.attribute, x, y, groupAttribute);
@@ -162,9 +165,6 @@ export class DefaultCanvasGroupRender implements IGraphicRender {
       context.clip();
     }
 
-    // shadow
-    context.setShadowBlendStyle && context.setShadowBlendStyle(group, group.attribute, groupAttribute);
-
     const _runFill = () => {
       if ((doFillOrStroke as any).doFill) {
         if (fillCb) {

diff --git a/packages/vrender/__tests__/browser/src/pages/image-cloud.ts b/packages/vrender/__tests__/browser/src/pages/image-cloud.ts
@@ -31,10 +31,12 @@ export const page = () => {
     width: 300,
     height: 300,
     background: visactorIcon,
-    drawMode: 2
+    drawMode: 1,
+    clip: true,
+    globalCompositeOperation: 'destination-in'
   });
 
-  for (let i = 0; i < 300; i++) {
+  for (let i = 0; i < 20; i++) {
     const image = createImage({
       x: Math.random() * 350 - 25,
       y: Math.random() * 350 - 25,