修复一些bug

987153776 · Nov 20, 2020 · a12f18f · a12f18f
1 parent f83ffad
commit a12f18f
Show file tree

Hide file tree

Showing 10 changed files with 177 additions and 73 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 2.0.15 (2020-11-20)
+
+#### :bug: Bug Fix
+* 修复某些情况下手指坐标计算错误的问题。
+* 修复ie上图片或遮罩动画开始时有一次闪动的问题。
+
 ## 2.0.14 (2020-11-20)
 
 #### :bug: Bug Fix

diff --git a/dist/js/app.js b/dist/js/app.js
diff --git a/lib/vue-picture-cut.common.js b/lib/vue-picture-cut.common.js
@@ -7285,6 +7285,9 @@ var es_array_for_each = __webpack_require__("4160");
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.from.js
 var es_array_from = __webpack_require__("a630");
 
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.index-of.js
+var es_array_index_of = __webpack_require__("c975");
+
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.map.js
 var es_array_map = __webpack_require__("d81d");
 
@@ -7947,11 +7950,14 @@ function loadCrossDomainImg(src) {
 
 
 
+
 var PhotoRoot_PhotoRoot = /*#__PURE__*/function () {
   function PhotoRoot() {
     _classCallCheck(this, PhotoRoot);
 
-    this.debug = false; // 事件队列
+    this.debug = false; // 是否是火狐
+
+    this.isFirefox = navigator.userAgent.indexOf("Firefox") > 0; // 事件队列
 
     this.eventList = new Map(); // 事件优先队列
 
@@ -8112,25 +8118,23 @@ var PhotoRoot_PhotoRoot = /*#__PURE__*/function () {
 
         _this._mouseMove(e);
       }, false);
-      this.root.addEventListener('mousewheel', function (event) {
+      this.isFirefox ? this.root.addEventListener('DOMMouseScroll', function (event) {
         var e = event || window.event;
         e.preventDefault();
-        var delta = e.wheelDelta || e.detail;
+        var delta = e.detail * -40;
 
         _this._mouseWheel(delta, {
-          x: e.offsetX * _this.magnification - _this.core.x,
-          y: e.offsetY * _this.magnification - _this.core.y
+          x: e.layerX * _this.magnification - _this.core.x,
+          y: e.layerY * _this.magnification - _this.core.y
         });
-      }, false); // 火狐鼠标滚轮
-
-      this.root.addEventListener('DOMMouseScroll', function (event) {
+      }, false) : this.root.addEventListener('mousewheel', function (event) {
         var e = event || window.event;
         e.preventDefault();
-        var delta = e.detail * -40;
+        var delta = e.wheelDelta || e.detail;
 
         _this._mouseWheel(delta, {
-          x: e.layerX * _this.magnification - _this.core.x,
-          y: e.layerY * _this.magnification - _this.core.y
+          x: e.offsetX * _this.magnification - _this.core.x,
+          y: e.offsetY * _this.magnification - _this.core.y
         });
       }, false);
     }
@@ -8384,8 +8388,8 @@ var PhotoRoot_PhotoRoot = /*#__PURE__*/function () {
     key: "_getMousePoint",
     value: function _getMousePoint(ct) {
       return {
-        x: (ct.layerX || ct.offsetX) * this.magnification - this.core.x,
-        y: (ct.layerY || ct.offsetY) * this.magnification - this.core.y,
+        x: (this.isFirefox ? ct.layerX : ct.offsetX) * this.magnification - this.core.x,
+        y: (this.isFirefox ? ct.layerY : ct.offsetY) * this.magnification - this.core.y,
         id: 0
       };
     }
@@ -8428,9 +8432,6 @@ var es_array_fill = __webpack_require__("cb29");
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.filter.js
 var es_array_filter = __webpack_require__("4de4");
 
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.index-of.js
-var es_array_index_of = __webpack_require__("c975");
-
 // CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/arrayWithHoles.js
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
@@ -8631,6 +8632,35 @@ var Bezier_Bezier = /*#__PURE__*/function () {
 
 
 
+(function () {
+  var lastTime = 0;
+  var vendors = ['webkit', 'moz'];
+
+  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
+    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || // Webkit中此取消方法的名字变了
+    window[vendors[x] + 'CancelRequestAnimationFrame'];
+  }
+
+  if (!window.requestAnimationFrame) {
+    window.requestAnimationFrame = function (callback) {
+      var currTime = new Date().getTime();
+      var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
+      var id = window.setTimeout(function () {
+        callback(currTime + timeToCall);
+      }, timeToCall);
+      lastTime = currTime + timeToCall;
+      return id;
+    };
+  }
+
+  if (!window.cancelAnimationFrame) {
+    window.cancelAnimationFrame = function (id) {
+      clearTimeout(id);
+    };
+  }
+})();
+
 var animation_Animation = /*#__PURE__*/function () {
   function Animation(option) {
     _classCallCheck(this, Animation);
@@ -9260,7 +9290,7 @@ var PhotoMain_PhotoMain = /*#__PURE__*/function () {
       if (this.img) {
         this.showRect = showRect;
 
-        this._draw(this.imgRect, this.showRect);
+        this._draw(this.imgRect, this._showRect || this.showRect);
       }
     }
     /**
@@ -9838,7 +9868,7 @@ var PhotoMain_PhotoMain = /*#__PURE__*/function () {
           sH = _this$showRect7.sH;
       offSV = offSV === void 0 ? sV === -1 : offSV;
       offSH = offSH === void 0 ? sH === -1 : offSH;
-      this.showRect = {
+      var showRect = {
         x: x + offX,
         y: y + offY,
         w: w + offW,
@@ -9848,14 +9878,16 @@ var PhotoMain_PhotoMain = /*#__PURE__*/function () {
         sH: offSH ? -1 : 1
       };
 
-      var _offSV = this.showRect.sV - sV;
+      var _offSV = showRect.sV - sV;
 
-      var _offSH = this.showRect.sH - sH;
+      var _offSH = showRect.sH - sH;
 
       if (!offX && !offY && !offW && !offH && !offR && !_offSH && !_offSV) {
         return;
       }
 
+      this._showRect = this.showRect;
+      this.showRect = showRect;
       this.animation = createAnimation({
         duration: 300,
         timing: 'ease-in-out',
@@ -10363,6 +10395,7 @@ var PhotoMask_PhotoMask = /*#__PURE__*/function () {
           y = _this$maskRect.y,
           w = _this$maskRect.w,
           h = _this$maskRect.h;
+      this._maskRect = this.maskRect;
       this.maskRect = {
         x: x + offX,
         y: y + offY,
@@ -10462,7 +10495,7 @@ var PhotoMask_PhotoMask = /*#__PURE__*/function () {
         this.root.deletePriority(this.className);
         this.touchePosition = undefined;
 
-        this._draw(this.maskRect, false, this);
+        this._draw(this._maskRect || this.maskRect, false, this);
 
         this.root.cursor = 'default';
       }

diff --git a/lib/vue-picture-cut.umd.js b/lib/vue-picture-cut.umd.js
@@ -7294,6 +7294,9 @@ var es_array_for_each = __webpack_require__("4160");
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.from.js
 var es_array_from = __webpack_require__("a630");
 
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.index-of.js
+var es_array_index_of = __webpack_require__("c975");
+
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.map.js
 var es_array_map = __webpack_require__("d81d");
 
@@ -7956,11 +7959,14 @@ function loadCrossDomainImg(src) {
 
 
 
+
 var PhotoRoot_PhotoRoot = /*#__PURE__*/function () {
   function PhotoRoot() {
     _classCallCheck(this, PhotoRoot);
 
-    this.debug = false; // 事件队列
+    this.debug = false; // 是否是火狐
+
+    this.isFirefox = navigator.userAgent.indexOf("Firefox") > 0; // 事件队列
 
     this.eventList = new Map(); // 事件优先队列
 
@@ -8121,25 +8127,23 @@ var PhotoRoot_PhotoRoot = /*#__PURE__*/function () {
 
         _this._mouseMove(e);
       }, false);
-      this.root.addEventListener('mousewheel', function (event) {
+      this.isFirefox ? this.root.addEventListener('DOMMouseScroll', function (event) {
         var e = event || window.event;
         e.preventDefault();
-        var delta = e.wheelDelta || e.detail;
+        var delta = e.detail * -40;
 
         _this._mouseWheel(delta, {
-          x: e.offsetX * _this.magnification - _this.core.x,
-          y: e.offsetY * _this.magnification - _this.core.y
+          x: e.layerX * _this.magnification - _this.core.x,
+          y: e.layerY * _this.magnification - _this.core.y
         });
-      }, false); // 火狐鼠标滚轮
-
-      this.root.addEventListener('DOMMouseScroll', function (event) {
+      }, false) : this.root.addEventListener('mousewheel', function (event) {
         var e = event || window.event;
         e.preventDefault();
-        var delta = e.detail * -40;
+        var delta = e.wheelDelta || e.detail;
 
         _this._mouseWheel(delta, {
-          x: e.layerX * _this.magnification - _this.core.x,
-          y: e.layerY * _this.magnification - _this.core.y
+          x: e.offsetX * _this.magnification - _this.core.x,
+          y: e.offsetY * _this.magnification - _this.core.y
         });
       }, false);
     }
@@ -8393,8 +8397,8 @@ var PhotoRoot_PhotoRoot = /*#__PURE__*/function () {
     key: "_getMousePoint",
     value: function _getMousePoint(ct) {
       return {
-        x: (ct.layerX || ct.offsetX) * this.magnification - this.core.x,
-        y: (ct.layerY || ct.offsetY) * this.magnification - this.core.y,
+        x: (this.isFirefox ? ct.layerX : ct.offsetX) * this.magnification - this.core.x,
+        y: (this.isFirefox ? ct.layerY : ct.offsetY) * this.magnification - this.core.y,
         id: 0
       };
     }
@@ -8437,9 +8441,6 @@ var es_array_fill = __webpack_require__("cb29");
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.filter.js
 var es_array_filter = __webpack_require__("4de4");
 
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.index-of.js
-var es_array_index_of = __webpack_require__("c975");
-
 // CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/arrayWithHoles.js
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
@@ -8640,6 +8641,35 @@ var Bezier_Bezier = /*#__PURE__*/function () {
 
 
 
+(function () {
+  var lastTime = 0;
+  var vendors = ['webkit', 'moz'];
+
+  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
+    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || // Webkit中此取消方法的名字变了
+    window[vendors[x] + 'CancelRequestAnimationFrame'];
+  }
+
+  if (!window.requestAnimationFrame) {
+    window.requestAnimationFrame = function (callback) {
+      var currTime = new Date().getTime();
+      var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
+      var id = window.setTimeout(function () {
+        callback(currTime + timeToCall);
+      }, timeToCall);
+      lastTime = currTime + timeToCall;
+      return id;
+    };
+  }
+
+  if (!window.cancelAnimationFrame) {
+    window.cancelAnimationFrame = function (id) {
+      clearTimeout(id);
+    };
+  }
+})();
+
 var animation_Animation = /*#__PURE__*/function () {
   function Animation(option) {
     _classCallCheck(this, Animation);
@@ -9269,7 +9299,7 @@ var PhotoMain_PhotoMain = /*#__PURE__*/function () {
       if (this.img) {
         this.showRect = showRect;
 
-        this._draw(this.imgRect, this.showRect);
+        this._draw(this.imgRect, this._showRect || this.showRect);
       }
     }
     /**
@@ -9847,7 +9877,7 @@ var PhotoMain_PhotoMain = /*#__PURE__*/function () {
           sH = _this$showRect7.sH;
       offSV = offSV === void 0 ? sV === -1 : offSV;
       offSH = offSH === void 0 ? sH === -1 : offSH;
-      this.showRect = {
+      var showRect = {
         x: x + offX,
         y: y + offY,
         w: w + offW,
@@ -9857,14 +9887,16 @@ var PhotoMain_PhotoMain = /*#__PURE__*/function () {
         sH: offSH ? -1 : 1
       };
 
-      var _offSV = this.showRect.sV - sV;
+      var _offSV = showRect.sV - sV;
 
-      var _offSH = this.showRect.sH - sH;
+      var _offSH = showRect.sH - sH;
 
       if (!offX && !offY && !offW && !offH && !offR && !_offSH && !_offSV) {
         return;
       }
 
+      this._showRect = this.showRect;
+      this.showRect = showRect;
       this.animation = createAnimation({
         duration: 300,
         timing: 'ease-in-out',
@@ -10372,6 +10404,7 @@ var PhotoMask_PhotoMask = /*#__PURE__*/function () {
           y = _this$maskRect.y,
           w = _this$maskRect.w,
           h = _this$maskRect.h;
+      this._maskRect = this.maskRect;
       this.maskRect = {
         x: x + offX,
         y: y + offY,
@@ -10471,7 +10504,7 @@ var PhotoMask_PhotoMask = /*#__PURE__*/function () {
         this.root.deletePriority(this.className);
         this.touchePosition = undefined;
 
-        this._draw(this.maskRect, false, this);
+        this._draw(this._maskRect || this.maskRect, false, this);
 
         this.root.cursor = 'default';
       }

diff --git a/lib/vue-picture-cut.umd.min.js b/lib/vue-picture-cut.umd.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-picture-cut",
-  "version": "2.0.14",
+  "version": "2.0.15",
   "description": "基于vue和typescript开发的一款图片剪裁处理工具。优点：原生、轻量、使用简单、功能全面、扩展性强。目前功能：缩放、翻折、旋转、边缘校验、矩形剪裁、任意(椭)圆剪裁。",
   "main": "lib/vue-picture-cut.umd.min.js",
   "directories": {

diff --git a/src/lib/views/PhotoMain.ts b/src/lib/views/PhotoMain.ts
@@ -309,7 +309,7 @@ export default class PhotoMain implements PhotoBasic{
   setShowRect (showRect: RectFull): void {
     if (this.img) {
       this.showRect = showRect;
-      this._draw(this.imgRect, this.showRect);
+      this._draw(this.imgRect, this._showRect || this.showRect);
     }
   }
 
@@ -746,7 +746,7 @@ export default class PhotoMain implements PhotoBasic{
     const { x, y, w, h, r, sV, sH} = this.showRect;
     offSV = offSV === void 0 ? sV === -1 : offSV;
     offSH = offSH === void 0 ? sH === -1 : offSH;
-    this.showRect = {
+    const showRect = {
       x: x + offX,
       y: y + offY,
       w: w + offW,
@@ -755,11 +755,13 @@ export default class PhotoMain implements PhotoBasic{
       sV: offSV ? -1 : 1,
       sH: offSH ? -1 : 1,
     };
-    const _offSV = this.showRect.sV - sV;
-    const _offSH = this.showRect.sH - sH;
+    const _offSV = showRect.sV - sV;
+    const _offSH = showRect.sH - sH;
     if (!offX && !offY && !offW && !offH && !offR && !_offSH && !_offSV) {
       return;
     }
+    this._showRect = this.showRect;
+    this.showRect = showRect;
     this.animation = createAnimation({
       duration: 300,
       timing: 'ease-in-out',