Merge pull request #1747 from VisActor/fix/image-stroke

Fix/image stroke
VisActor · Feb 21, 2025 · 06ce585 · 06ce585
2 parents f4ca018 + 66c407b
commit 06ce585
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/common/changes/@visactor/vrender-core/fix-image-stroke_2025-02-20-11-54.json b/common/changes/@visactor/vrender-core/fix-image-stroke_2025-02-20-11-54.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-core",
+      "comment": "fix: fix issue with image stroke style",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vrender-core"
+}
diff --git a/packages/vrender-core/src/render/contributions/render/image-render.ts b/packages/vrender-core/src/render/contributions/render/image-render.ts
@@ -89,13 +89,15 @@ export class DefaultCanvasImageRender extends BaseRender<IImage> implements IGra
 
     const width = image.width;
     const height = image.height;
+    context.beginPath();
 
     // deal with cornerRadius
     let needRestore = false;
     if (cornerRadius === 0 || (isArray(cornerRadius) && (<number[]>cornerRadius).every(num => num === 0))) {
       // 不需要处理圆角
+      context.rect(x, y, width, height);
     } else {
-      context.beginPath();
+      // context.beginPath();
       createRectPath(context, x, y, width, height, cornerRadius, cornerType !== 'bevel');
       needRestore = true;
     }
@@ -108,7 +110,6 @@ export class DefaultCanvasImageRender extends BaseRender<IImage> implements IGra
     const _runFill = () => {
       if (doFill) {
         if (fillCb) {
-          context.rect(x, y, width, height);
           fillCb(context, image.attribute, imageAttribute);
         } else if (fVisible) {
           context.setCommonStyle(image, image.attribute, x, y, imageAttribute);

diff --git a/packages/vrender/__tests__/browser/src/pages/image.ts b/packages/vrender/__tests__/browser/src/pages/image.ts
@@ -22,17 +22,19 @@ export const page = () => {
       image: dogImage,
       clipConfig: {
         shape: 'rectRound'
-      },
-      _debug_bounds: true
+      }
     })
   );
   shapes.push(
     createImage({
       x: 10,
       y: 300,
       width: 100,
-      image: dogImage,
-      _debug_bounds: true
+      stroke: 'green',
+      cornerRadius: 20,
+      lineWidth: 10,
+      fillStrokeOrder: -1,
+      image: dogImage
     })
   );
   shapes.push(
@@ -42,7 +44,9 @@ export const page = () => {
       width: 100,
       height: 100,
       image: dogImage,
-      _debug_bounds: true
+      stroke: 'pink',
+      fillStrokeOrder: -1,
+      lineWidth: 10
     })
   );