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

@@ -1,9 +1,9 @@
 <template>
     <div>
         <div style="position: absolute;top:10px;right: 4px">
-            <el-button @click="undo">撤销</el-button>
-            <el-button @click="redo">重做</el-button>
+            <el-button @click="changePaintState">{{paintStateFlagText}}</el-button>
             <el-button @click="clear">清空</el-button>
+            <el-button @click="save">保存</el-button>
         </div>
         <div style="height: 1700px; height:900px;display: flex;justify-content: center">
             <canvas width="1700" height="900" style="border: 1px solid blue; background-color: white;" id="can"></canvas>
@@ -19,13 +19,14 @@
     let startMouse = { x: 0, y: 0 };
     let moveMouse = { x: 0, y: 0 };
 
+    // 画笔橡皮擦状态，true画笔，false橡皮
+    let paintStateFlag = true;
+    let paintStateFlagText = ref('画笔');
+
     // 第一个职业
     let startAngle11 = 0;
-    let start11Flag = false;
     let startAngle12 = 0;
-    let start12Flag = false;
     let startAngle13 = 0;
-    let start13Flag = false;
 
     // 第二个职业
     let startAngle21 = 0;
@@ -114,15 +115,33 @@
         // 第一个职业
         if(sum < Math.pow(100,2) && sum > Math.pow(50,2)){
             if(paintFlagList[0]){
-                paint("green", 75, startAngle11 ,ret);
+                if(paintStateFlag){
+                    paint("green", 75, startAngle11 ,ret);
+                }else{
+                    paint("white", 75, startAngle11 ,ret);
+                    paint("white", 125, startAngle11 ,ret);
+                    paint("white", 175, startAngle11 ,ret);
+                }
             }
         }else if(sum < Math.pow(150,2) && sum > Math.pow(100,2)){
             if(paintFlagList[1]){
-                paint("green", 125, startAngle12 ,ret);
+                if(paintStateFlag){
+                    paint("green", 125, startAngle12 ,ret);
+                    paint("green", 75, startAngle12 ,ret);
+                }else{
+                    paint("white", 125, startAngle12 ,ret);
+                    paint("white", 175, startAngle12 ,ret);
+                }
             }
         }else if(sum < Math.pow(200,2) && sum > Math.pow(150,2)){
             if(paintFlagList[2]){
-                paint("green", 175, startAngle13 ,ret);
+                if(paintStateFlag){
+                    paint("green", 175, startAngle13 ,ret);
+                    paint("green", 125, startAngle13 ,ret);
+                    paint("green", 75, startAngle13 ,ret);
+                }else{
+                    paint("white", 175, startAngle13 ,ret);
+                }
             }
         }
         // 第二个职业
@@ -133,10 +152,13 @@
         }else if(sum < Math.pow(350,2) && sum > Math.pow(300,2)){
             if(paintFlagList[4]){
                 paint("#ffd309", 325, startAngle22 ,ret);
+                paint("#ffd309", 275, startAngle22 ,ret);
             }
         }else if(sum < Math.pow(400,2) && sum > Math.pow(350,2)){
             if(paintFlagList[5]){
                 paint("#ffd309", 375, startAngle23 ,ret);
+                paint("#ffd309", 325, startAngle23 ,ret);
+                paint("#ffd309", 275, startAngle23 ,ret);
             }
         }
     }
@@ -177,19 +199,25 @@
         if(endAngle <= startAngle){
             return;
         }
-        context.lineWidth = 50;
+        context.lineWidth = 48;
         context.strokeStyle = color;
         context.beginPath();
         context.arc(CENTER_X, CENTER_Y, radius, startAngle, endAngle, false);
         context.stroke();
     }
 
-    function undo(){
-
+    function changePaintState(){
+        if(paintStateFlag){
+            paintStateFlag = false;
+            paintStateFlagText.value = '橡皮擦'
+        }else{
+            paintStateFlag = true;
+            paintStateFlagText.value = '画笔'
+        }
     }
 
-    function redo(){
-
+    function eraserState(){
+        paintStateFlag = false;
     }
 
     function clear(){

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

@@ -54,10 +54,6 @@
         })
     }
 
-    function calcOffset(){
-
-    }
-
     /*计算起始点*/
     function calcStartRadius(){
         let sum = Math.pow(startMouse.x-CENTER_X, 2)+ Math.pow(CENTER_Y-startMouse.y, 2);
@@ -171,6 +167,7 @@
 
         arc(700);
     }
+
     onMounted(() => {
         init();
         changes();