更新图片组件

src/pages/test/TestImg.vue

@@ -22,16 +22,11 @@ export default {
       x: 0,
       y: 0,
       scale: 1,
-      maxScale: 3,
-      minScale: 0.5,
       point1: {x: 0, y: 0},
       point2: {x: 0, y: 0},
-      diff: {x: 0, y: 0},
-      lastPointermove: {x: 0, y: 0},
       lastPoint1: {x: 0, y: 0},
       lastPoint2: {x: 0, y: 0},
       lastCenter: {x: 0, y: 0},
-      touches: [],
     }
   },
   created() {
@@ -72,13 +67,13 @@ export default {
         this.lastPoint2 = this.point2 = {x: events2.pageX, y: events2.pageY};
         this.lastCenter = this.getCenter(this.lastPoint1, this.lastPoint2)
         // console.log('lastPoint1', this.lastPoint1)
-
       }
     },
     move(e) {
       if (e.touches && e.touches.length === 1) {
       } else {
         this.isTwo = true
+        e.preventDefault();
 
         let current1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
         let current2 = {x: e.touches[1].pageX, y: e.touches[1].pageY}
@@ -89,7 +84,7 @@ export default {
 
         this.scale = this.scale * ratio
         // 计算当前双指中心点坐标
-        // let center = this.getCenter(current1, current2)
+        let center = this.getCenter(current1, current2)
         // console.log('center', center)
 
         // 计算图片中心偏移量，默认transform-origin: 50% 50%
@@ -97,23 +92,21 @@ export default {
         // origin.y = (ratio - 1) * result.height * 0.4
         // 如果通过修改宽高或使用transform缩放，但将transform-origin设置为左上角时。
         // 可以不用计算origin，因为(ratio - 1) * result.width * 0 = 0
-        // const origin = {
+        const origin = {
-        //   x: (ratio - 1) * this.result.width * 0.5,
+          x: (ratio - 1) * this.result.width * 0.5,
-        //   y: (ratio - 1) * this.result.height * 0.5
+          y: (ratio - 1) * this.result.height * 0.5
-        // };
+        };
         // 计算偏移量，认真思考一下为什么要这样计算(带入特定的值计算一下)
-        // this.x -= (ratio - 1) * (center.x - this.x) - origin.x - (center.x - this.lastCenter.x);
+        this.x -= (ratio - 1) * (center.x - this.x) - origin.x - (center.x - this.lastCenter.x);
-        // this.y -= (ratio - 1) * (center.y - this.y) - origin.y - (center.y - this.lastCenter.y);
+        this.y -= (ratio - 1) * (center.y - this.y) - origin.y - (center.y - this.lastCenter.y);
 
         // console.log('this.x', this.x)
         // console.log('this.y', this.y)
 
         // 图像应用缩放效果
-        this.$refs.img.style.transform =
+        this.$refs.img.style.transform = `translate3d(${this.x}px,${this.y}px,0) scale(${this.scale})`;
-            // `translate3d(${this.x}px,${this.y}px,0)  scale(${this.scale})`;
-            `scale(${this.scale})`;
 
-        // this.lastCenter = {x: center.x, y: center.y};
+        this.lastCenter = {x: center.x, y: center.y};
         this.lastPoint1 = {x: current1.x, y: current1.y};
         this.lastPoint2 = {x: current2.x, y: current2.y};
       }
@@ -123,8 +116,9 @@ export default {
       // 图像应用缩放效果
       this.scale = 1
       this.x = this.y = 0
-      this.$refs.img.style.transform =
+      this.$refs.img.style['transition-duration'] = '300ms';
-          `translate3d(0px,0px,0) scale(1)`;
+
+      this.$refs.img.style.transform = `translate3d(0px,0px,0) scale(1)`;
       // this.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
 
     }