[feat][生涯彩虹图][试验生涯彩虹图]

src/router/router_common.js

@@ -13,7 +13,7 @@ const router = [
         component: () => import('@/views/xjc-integratedmachine/common/ai/TestColorCanvas.vue'),
     },
     {
-        path: '/xjc-integratedmachine/common/touchtColor',
+        path: '/xjc-integratedmachine/common/touchColor',
         component: () => import('@/views/xjc-integratedmachine/common/ai/TouchColor.vue'),
     },
     {

src/views/xjc-integratedmachine/common/ai/TestColorCanvas.vue

@@ -36,15 +36,12 @@
         can.onmousedown = function (el) {
             startMouse.x = el.offsetX;
             startMouse.y = el.offsetY;
-            console.log("起点："+startMouse.x+"==="+startMouse.y);
             calcStartRadius();
             can.onmousemove = function (e) {
                 moveMouse.x = startMouse.x;
                 moveMouse.y = startMouse.y;
                 startMouse.x = e.pageX - this.offsetLeft;
                 startMouse.y = e.pageY - this.offsetTop;
-        /*        console.log("last_mouse.x="+moveMouse.x);
-                console.log("last_mouse.y="+moveMouse.y);*/
                 if(startMouse.x !== moveMouse.x && startMouse.y !== moveMouse.y){
                     return;
                 }

src/views/xjc-integratedmachine/common/ai/TouchColor.vue

@@ -113,22 +113,23 @@
 
     function changes() {
         elementById.addEventListener('touchstart', function (el) {
-            startMouse.x = el.targetTouches[0].pageX;
-            startMouse.y = el.targetTouches[0].pageY;
+            // el.preventDefault();
+            let rect = el.target.getBoundingClientRect();
+            startMouse.x = el.touches[0].pageX - rect.left;
+            startMouse.y = el.touches[0].pageY - rect.top;
+            console.log('起点：'+startMouse.x+"终点："+startMouse.y)
             calcStartRadius();
             elementById.addEventListener('touchmove', function (e) {
                 moveMouse.x = startMouse.x;
                 moveMouse.y = startMouse.y;
                 startMouse.x = e.pageX - this.offsetLeft;
                 startMouse.y = e.pageY - this.offsetTop;
-                console.log("last_mouse.x="+moveMouse.x);
-                console.log("last_mouse.y="+moveMouse.y);
                 calcEndRadius();
                 // calcEndAngle();
             })
         })
         elementById.addEventListener('touchend', function () {
-            elementById.onmousemove = null;
+            // elementById.removeEventListener('touchmove',this,false);
         })
     }
 

src/views/xjc-integratedmachine/common/ai/TouchColorCanvas.vue

@@ -34,17 +34,15 @@
 
     function changes() {
         can.addEventListener('touchstart', function (el) {
-            startMouse.x = el.touches[0].pageX;
-            startMouse.y = el.touches[0].pageX;
-            console.log("起点："+startMouse.x+"==="+startMouse.y);
+            let rect = el.target.getBoundingClientRect();
+            startMouse.x = el.touches[0].pageX - rect.left;
+            startMouse.y = el.touches[0].pageY - rect.top;
             calcStartRadius();
             can.addEventListener('touchmove', function (e) {
                 moveMouse.x = startMouse.x;
                 moveMouse.y = startMouse.y;
                 startMouse.x = e.targetTouches[0].pageX - this.offsetLeft;
                 startMouse.y = e.targetTouches[0].pageY - this.offsetTop;
-        /*        console.log("last_mouse.x="+moveMouse.x);
-                console.log("last_mouse.y="+moveMouse.y);*/
                 if(startMouse.x !== moveMouse.x && startMouse.y !== moveMouse.y){
                     return;
                 }
@@ -56,6 +54,10 @@
         })
     }
 
+    function calcOffset(){
+
+    }
+
     /*计算起始点*/
     function calcStartRadius(){
         let sum = Math.pow(startMouse.x-CENTER_X, 2)+ Math.pow(CENTER_Y-startMouse.y, 2);