update

src/components/tools/imgDraw/imgDraw.vue

@@ -382,8 +382,11 @@ export default {
       img.crossOrigin = "";
       let _this = this;
       img.onload = function () {
-        let width = parseInt(this.width);
-        let height = parseInt(this.height);
+        let _wWith = window.screen.availWidth - 100
+        let _width = parseInt(this.width);
+        let _height = parseInt(this.height);
+        let width =  _wWith
+        let height = _height / _width * width
         _this.currentImg.width = width;
         _this.currentImg.height = height;
         _this.canvas_front.width = width;
@@ -481,12 +484,12 @@ export default {
         e = e || window.event;
         sx = e.clientX - this.canvas_front.offsetLeft;
         sy = e.clientY - this.canvas_front.offsetTop;
-        // const cbx = this.ctx_base.getImageData(
-        //   e.offsetX - this.slide / 2,
-        //   e.offsetY - this.slide / 2,
-        //   this.slide * 2,
-        //   this.slide * 2
-        // );
+        const cbx = this.ctx_base.getImageData(
+          (e.offsetX || e.pageX) - this.slide / 2,
+          (e.offsetY || e.pageY) - this.slide / 2,
+          this.slide * 2,
+          this.slide * 2
+        );
         this.ctx_front.moveTo(sx, sy);
         this.canDraw = true;
         switch (type) {
@@ -496,8 +499,8 @@ export default {
           case 5:
             this.ctx_front.putImageData(
               cbx,
-              e.offsetX - this.slide / 2,
-              e.offsetY - this.slide / 2
+              (e.offsetX || e.pageX) - this.slide / 2,
+              (e.offsetY || e.pageY) - this.slide / 2
             );
             break;
           case 6:
@@ -506,36 +509,26 @@ export default {
             text.style.fontSize = 14 + this.slide * 10 + "px";
             text.style.color = this.defaultColor;
             text.style.left =
-              e.offsetX + this.canvas_front.offsetLeft - 20 + "px";
+              (e.offsetX || e.pageX) + this.canvas_front.offsetLeft - 20 + "px";
             text.style.top =
-              e.offsetY + this.canvas_front.offsetTop - 10 + "px";
+              (e.offsetY || e.pageY) + this.canvas_front.offsetTop - 10 + "px";
             text.style.zIndex = 10;
             text.style.display = "block";
-            this.tl = e.offsetX - 20;
-            this.tt = e.offsetY + 10;
+            this.tl = (e.offsetX || e.pageX) - 20;
+            this.tt = (e.offsetY || e.pageY) + 10;
             break;
         }
       };
       let mousemove = (e) => {
         e = e || window.event;
-        // mx = e.clientX - this.canvas_front.offsetLeft;
-        // my = e.clientY - this.canvas_front.offsetTop;
-        var scrollL =
-          document.getElementsByClassName("d_body")[0].scrollLeft ||
-          document.getElementsByClassName("d_body")[0].scrollLeft;
-        var scrollT =
-          document.getElementsByClassName("d_body")[0].scrollTop ||
-          document.getElementsByClassName("d_body")[0].scrollTop;
-        // mx = e.clientX + scrollL;
-        // my = e.clientY + scrollT;
-        mx = e.clientX - this.canvas_front.offsetLeft + scrollL;
-        my = e.clientY - this.canvas_front.offsetTop + scrollT;
-        // const cbx = this.ctx_base.getImageData(
-        //   e.offsetX - this.slide / 2,
-        //   e.offsetY - this.slide / 2,
-        //   this.slide * 2,
-        //   this.slide * 2
-        // );
+        mx = e.clientX - this.canvas_front.offsetLeft;
+        my = e.clientY - this.canvas_front.offsetTop;
+        const cbx = this.ctx_base.getImageData(
+          (e.offsetX || e.pageX) - this.slide / 2,
+          (e.offsetY || e.pageY) - this.slide / 2,
+          this.slide * 2,
+          this.slide * 2
+        );
         if (this.canDraw) {
           switch (type) {
             case 1:
@@ -573,8 +566,8 @@ export default {
             case 5:
               this.ctx_front.putImageData(
                 cbx,
-                e.offsetX - this.slide / 2,
-                e.offsetY - this.slide / 2
+                (e.offsetX || e.pageX) - this.slide + 20,
+                (e.offsetY || e.pageY) - this.slide + 20
               );
               break;
           }
@@ -594,6 +587,22 @@ export default {
       this.canvas_front.onmouseup = (e) => mouseup(e);
       this.canvas_front.onmouseout = (e) => mouseup(e);
       this.canvas_front.onmouseleave = (e) => mouseup(e);
+      
+      this.canvas_front.addEventListener("touchstart", (e) => {
+        mousedown(e.touches[0]);
+      });
+      this.canvas_front.addEventListener("touchmove", (e) => {
+        event.preventDefault();
+        mousemove(e.touches[0]);
+      });
+      this.canvas_front.addEventListener("touchend", (e) => {
+        // mousemove(e.touches[0])
+        mouseup(e.touches[0]);
+      });
+      // this.canvas_front.ontouchstart = (e) => mousedown(e);
+      // this.canvas_front.ontouchmove = (e) => mousemove(e);
+
+      // this.canvas_front.ontouchend  = (e) => mouseup(e);
     },
     /** 失焦或者回车绘制文本，框隐藏*/
     handleTextBlur() {
@@ -657,7 +666,6 @@ export default {
         this.prevDis = false;
         console.log(this.canvasStore);
       };
-
     },
     // 将网络图片转换成base64格式
     transBase64FromImage(image) {
@@ -685,11 +693,11 @@ export default {
         // return base64
       };
     },
-    handleSave(){
+    handleSave() {
       let url = this.canvas_back.toDataURL();
       console.log(url);
-      this.$emit('addImgDraw', url)
-    }
+      this.$emit("addImgDraw", url);
+    },
   },
   mounted() {
     this.$nextTick(() => {