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

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

@@ -1,5 +1,10 @@
 <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="clear">清空</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>
         </div>
@@ -24,6 +29,9 @@
     let startAngle22 = 0;
     let startAngle23 = 0;
 
+    let undoList = []; // 用于保存所有操作，用于撤销和重做
+    let redoList = []; // 用于保存所有撤销的操作，用于重做
+
     function changes() {
         can.onmousedown = function (el) {
             startMouse.x = el.offsetX;
@@ -37,8 +45,9 @@
         /*        console.log("last_mouse.x="+moveMouse.x);
                 console.log("last_mouse.y="+moveMouse.y);*/
                 if(startMouse.x !== moveMouse.x && startMouse.y !== moveMouse.y){
-                    calcEndRadius();
+                    return;
                 }
+                calcEndRadius();
             }
         }
         can.onmouseup = function () {
@@ -105,31 +114,43 @@
     }
 
     let can = "";
-    let ctx = "";
+    let context = "";
     function init(){
         can = document.getElementById('can');
-        ctx = can.getContext('2d');
+        context = can.getContext('2d');
     }
 
     function arc(num){
-        ctx.lineWidth = 1;
-        ctx.beginPath();
-        ctx.arc(CENTER_X, CENTER_Y, num,  Math.PI,  2*Math.PI, false);
-        ctx.stroke();
+        context.lineWidth = 1;
+        context.strokeStyle = 'black'
+        context.beginPath();
+        context.arc(CENTER_X, CENTER_Y, num,  Math.PI,  2*Math.PI, false);
+        context.stroke();
     }
 
 
     function paint(color, radius, startAngle, endAngle){
-        ctx.lineWidth = 50;
-        ctx.strokeStyle = color;
-        ctx.beginPath();
-        ctx.arc(CENTER_X, CENTER_Y, radius, startAngle, endAngle, false);
-        ctx.stroke();
+        context.lineWidth = 50;
+        context.strokeStyle = color;
+        context.beginPath();
+        context.arc(CENTER_X, CENTER_Y, radius, startAngle, endAngle, false);
+        context.stroke();
     }
 
-    onMounted(() => {
-        init();
-        changes();
+    function undo(){
+
+    }
+
+    function redo(){
+
+    }
+
+    function clear(){
+        context.clearRect(0, 0, can.width, can.height);
+        drawBackground();
+    }
+
+    function drawBackground(){
         arc(50);
         arc(100);
         arc(150);
@@ -146,6 +167,11 @@
         arc(600);
 
         arc(700);
+    }
+    onMounted(() => {
+        init();
+        changes();
+        drawBackground();
     });
 </script>