fix: 修复多边形裁切时，缩放数值计算方式错误，位置不正确 (ikuaitu#427)

* fix: 修复圆形裁切调整上下左右缩放成椭圆时，取消选择回复圆的问题 * fix: 修复多边形裁切时，缩放数值计算方式错误，位置不正确 --------- Co-authored-by: weicheng.liang <weicheng.liang@tuodi.cn>
wjx600 · Jun 7, 2024 · b4ca127 · b4ca127
1 parent 6c32372
commit b4ca127
Showing 1 changed file with 21 additions and 12 deletions.
diff --git a/packages/core/plugin/SimpleClipImagePlugin.ts b/packages/core/plugin/SimpleClipImagePlugin.ts
@@ -163,20 +163,18 @@ export default class SimpleClipImagePlugin {
       shell.on('deselected', () => {
         if (clipPath instanceof fabric.Ellipse && shell instanceof fabric.Ellipse) {
           clipPath.set({ rx: shell.getRx(), ry: shell.getRy() });
+          this.correctPosition(activeObject, shell, clipPath);
+        } else if (shell instanceof fabric.Polygon) {
+          this.correctPosition(activeObject, shell, clipPath);
+          const { scaleX: cSx = 1, scaleY: cSy = 1 } = clipPath;
+          const { scaleX: sSx = 1, scaleY: sSy = 1 } = shell;
+          clipPath.set('scaleX', cSx * sSx);
+          clipPath.set('scaleY', cSy * sSy);
         } else {
-          clipPath.set({
-            width: shell.getScaledWidth(),
-            height: shell.getScaledHeight(),
-          });
+          this.correctPosition(activeObject, shell, clipPath);
+          clipPath.set('width', shell.getScaledWidth());
+          clipPath.set('height', shell.getScaledHeight());
         }
-        const position = activeObject.toLocalPoint(shell.getCenterPoint(), 'center', 'center');
-        clipPath.set({
-          absolutePositioned: false,
-          left: position.x / activeObject.scaleX,
-          top: position.y / activeObject.scaleX,
-          scaleX: 1 / activeObject.scaleX,
-          scaleY: 1 / activeObject.scaleY,
-        });
         activeObject.set('dirty', true);
         this.canvas.remove(shell);
         this.canvas.requestRenderAll();
@@ -186,6 +184,17 @@ export default class SimpleClipImagePlugin {
       this.canvas.setActiveObject(shell);
     }
   }
+  correctPosition(activeObject: fabric.Object, shell: fabric.Object, clipPath: fabric.Object) {
+    const position = activeObject.toLocalPoint(shell.getCenterPoint(), 'center', 'center');
+    const { scaleX = 1, scaleY = 1 } = activeObject;
+    clipPath.set({
+      absolutePositioned: false,
+      left: position.x / scaleX,
+      top: position.y / scaleY,
+      scaleX: 1 / scaleX,
+      scaleY: 1 / scaleY,
+    });
+  }
   removeClip() {
     const activeObject = this.canvas.getActiveObjects()[0];
     if (activeObject && activeObject.type === 'image') {