@meta2d/core 1.1.8 → 1.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meta2d/core",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "description": "@meta2d/core: Powerful, Beautiful, Simple, Open - Web-Based 2D At Its Best .",
   "main": "index.js",
   "types": "index.d.ts",

package/src/canvas/canvas.d.ts

@@ -50,6 +50,9 @@ export declare class Canvas {
     touchMoving?: boolean;
     startTouches?: TouchList;
     lastTouchY?: number;
+    startDistance?: number;
+    startCenter?: Point;
+    currentCenter?: Point;
     lastOffsetX: number;
     lastOffsetY: number;
     drawingLineName?: string;
@@ -153,6 +156,11 @@ export declare class Canvas {
     ontouchstart: (e: TouchEvent) => void;
     ontouchmove: (event: TouchEvent) => void;
     ontouchend: (event: TouchEvent) => void;
+    getDistance(touch1: any, touch2: any): number;
+    getCenter(touch1: any, touch2: any): {
+        x: number;
+        y: number;
+    };
     onGesturestart: (e: any) => void;
     /**
      * 获取初始化的 pencilLine

package/src/canvas/canvas.js

@@ -52,6 +52,9 @@ export class Canvas {
     touchMoving;
     startTouches;
     lastTouchY;
+    startDistance;
+    startCenter;
+    currentCenter;
     lastOffsetX = 0;
     lastOffsetY = 0;
     drawingLineName;
@@ -1335,13 +1338,13 @@ export class Canvas {
             return [];
         }
         const list = [];
-        for (const pen of pens) {
-            if (!pen.id) {
-                pen.id = s8();
-            }
-            !pen.calculative && (pen.calculative = { canvas: this });
-            this.store.pens[pen.id] = pen;
-        }
+        // for (const pen of pens) {
+        //   if (!pen.id) {
+        //     pen.id = s8();
+        //   }
+        //   !pen.calculative && (pen.calculative = { canvas: this });
+        //   this.store.pens[pen.id] = pen;
+        // }
         for (const pen of pens) {
             if (this.beforeAddPen && this.beforeAddPen(pen) != true) {
                 continue;
@@ -1371,7 +1374,9 @@ export class Canvas {
         const tapTime = currentTime - this.lastTapTime;
         if (tapTime < 300 && tapTime > 0) {
             //双击
-            this.ondblclick(e);
+            if (e.touches.length !== 2) {
+                this.ondblclick(e);
+            }
         }
         this.lastTapTime = currentTime;
         if (this.touchStartTimer) {
@@ -1409,6 +1414,11 @@ export class Canvas {
                         (e.touches[1].pageY - e.touches[0].pageY) / 2 -
                         this.clientRect.y,
                 };
+                this.startDistance = this.getDistance(e.touches[0], e.touches[1]);
+                this.startCenter = this.getCenter(e.touches[0], e.touches[1]);
+                this.currentCenter = { ...this.startCenter };
+                this.touchScaling = undefined;
+                this.touchMoving = undefined;
                 return;
             }
             else if (e.touches.length === 3) {
@@ -1467,15 +1477,31 @@ export class Canvas {
         else if (len === 2 && this.startTouches?.length === 2) {
             this.mouseDown = undefined;
             if (!this.touchMoving && !this.touchScaling) {
-                const x1 = this.startTouches[0].pageX - touches[0].pageX;
-                const x2 = this.startTouches[1].pageX - touches[1].pageX;
-                const y1 = this.startTouches[0].pageY - touches[0].pageY;
-                const y2 = this.startTouches[1].pageY - touches[1].pageY;
-                if ((((x1 >= 0 && x2 < 0) || (x1 <= 0 && x2 > 0)) &&
-                    ((y1 >= 0 && y2 < 0) || (y1 <= 0 && y2 > 0))) || (x2 == 0 && y2 == 0) || (x1 == 0 && y1 == 0)) {
+                // const x1 = this.startTouches[0].pageX - touches[0].pageX;
+                // const x2 = this.startTouches[1].pageX - touches[1].pageX;
+                // const y1 = this.startTouches[0].pageY - touches[0].pageY;
+                // const y2 = this.startTouches[1].pageY - touches[1].pageY;
+                // if (
+                //   (((x1 >= 0 && x2 < 0) || (x1 <= 0 && x2 > 0)) &&
+                //   ((y1 >= 0 && y2 < 0) || (y1 <= 0 && y2 > 0)))||(x2==0&&y2==0)||(x1==0&&y1==0)
+                // ) {
+                //   this.touchScaling = true;
+                // } else if(y1*y2 > 0 && x1*x2 > 0){
+                //   this.touchMoving = true;
+                // }
+                // 当前距离和中心点
+                const currentDistance = this.getDistance(touches[0], touches[1]);
+                const newCenter = this.getCenter(touches[0], touches[1]);
+                // 计算变化
+                const distanceDiff = currentDistance - this.startDistance;
+                const centerDiffX = newCenter.x - this.currentCenter.x;
+                const centerDiffY = newCenter.y - this.currentCenter.y;
+                const centerMoveDistance = Math.sqrt(centerDiffX * centerDiffX + centerDiffY * centerDiffY);
+                const scaleRatio = Math.abs(distanceDiff) / this.startDistance;
+                if (scaleRatio > centerMoveDistance / 100) {
                     this.touchScaling = true;
                 }
-                else if (y1 * y2 > 0 && x1 * x2 > 0) {
+                else if (centerMoveDistance > 5) {
                     this.touchMoving = true;
                 }
             }
@@ -1530,6 +1556,17 @@ export class Canvas {
             this.render();
         }, 60);
     };
+    getDistance(touch1, touch2) {
+        const dx = touch2.clientX - touch1.clientX;
+        const dy = touch2.clientY - touch1.clientY;
+        return Math.sqrt(dx * dx + dy * dy);
+    }
+    getCenter(touch1, touch2) {
+        return {
+            x: (touch1.clientX + touch2.clientX) / 2,
+            y: (touch1.clientY + touch2.clientY) / 2
+        };
+    }
     onGesturestart = (e) => {
         e.preventDefault();
     };