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

@@ -1,28 +1,31 @@
 <template>
-    <div ref="content">
-        <el-button @click="save">保存</el-button>
-
+    <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  ref="canvas" width="1700" height="900" style="border: 1px solid blue; background-color: white;"
-                    id="can"></canvas>
+        <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>
     </div>
 </template>
-
 <script setup>
-    import html2canvas from 'html2canvas';
     import {onMounted} from 'vue'
     import * as echarts from "echarts";
+    import html2canvas from 'html2canvas';
+
+    const backgroundImage = new Image();
+    backgroundImage.src = 'http://192.168.3.100/screenshot.png'; // 替换为你的背景图片路径
 
     let CENTER_X = 850;
     let CENTER_Y = 900;
-    let startMouse = {x: 0, y: 0};
-    let moveMouse = {x: 0, y: 0};
+    let startMouse = { x: 0, y: 0 };
+    let moveMouse = { x: 0, y: 0 };
+
+    // 画笔橡皮擦状态，true画笔，false橡皮
+    let paintStateFlag = true;
+    let paintStateFlagText = ref('画笔');
 
     // 第一个职业
     let startAngle11 = 0;
@@ -34,6 +37,15 @@
     let startAngle22 = 0;
     let startAngle23 = 0;
 
+    // 所有轨道绘画限制
+    let paintFlagList = [
+        false, false, false,
+        false, false, false,
+        false, false, false,
+        false, false, false,
+        false, false, false,
+        false, false, false]
+
     let undoList = []; // 用于保存所有操作，用于撤销和重做
     let redoList = []; // 用于保存所有撤销的操作，用于重做
 
@@ -48,7 +60,7 @@
                 moveMouse.y = startMouse.y;
                 startMouse.x = e.targetTouches[0].pageX - this.offsetLeft;
                 startMouse.y = e.targetTouches[0].pageY - this.offsetTop;
-                if (startMouse.x !== moveMouse.x && startMouse.y !== moveMouse.y) {
+                if(startMouse.x !== moveMouse.x && startMouse.y !== moveMouse.y){
                     return;
                 }
                 calcEndRadius();
@@ -60,51 +72,105 @@
     }
 
     /*计算起始点*/
-    function calcStartRadius() {
-        let sum = Math.pow(startMouse.x - CENTER_X, 2) + Math.pow(CENTER_Y - startMouse.y, 2);
+    function calcStartRadius(){
+        let sum = Math.pow(startMouse.x-CENTER_X, 2)+ Math.pow(CENTER_Y-startMouse.y, 2);
         // 第一个职业
-        if (sum < Math.pow(100, 2) && sum > Math.pow(50, 2)) {
+        if(sum < Math.pow(100,2) && sum > Math.pow(50,2)){
             startAngle11 = calcAngle();
-        } else if (sum < Math.pow(150, 2) && sum > Math.pow(100, 2)) {
+            calcPaintCircleFlag(0)
+        }else if(sum < Math.pow(150,2) && sum > Math.pow(100,2)){
             startAngle12 = calcAngle();
-        } else if (sum < Math.pow(200, 2) && sum > Math.pow(150, 2)) {
+            calcPaintCircleFlag(1)
+        }else if(sum < Math.pow(200,2) && sum > Math.pow(150,2)){
             startAngle13 = calcAngle();
+            calcPaintCircleFlag(2)
         }
         // 第二个职业
-        else if (sum < Math.pow(300, 2) && sum > Math.pow(250, 2)) {
+        else if(sum < Math.pow(300,2) && sum > Math.pow(250,2)){
             startAngle21 = calcAngle();
-        } else if (sum < Math.pow(350, 2) && sum > Math.pow(300, 2)) {
+            calcPaintCircleFlag(3)
+        }else if(sum < Math.pow(350,2) && sum > Math.pow(300,2)){
             startAngle22 = calcAngle();
-        } else if (sum < Math.pow(400, 2) && sum > Math.pow(350, 2)) {
+            calcPaintCircleFlag(4)
+        }else if(sum < Math.pow(400,2) && sum > Math.pow(350,2)){
             startAngle23 = calcAngle();
+            calcPaintCircleFlag(5)
         }
     }
 
+    /**
+     * 只有起始点所在轨道可以绘制
+     **/
+    function calcPaintCircleFlag(index){
+        paintFlagList = [
+            false, false, false,
+            false, false, false,
+            false, false, false,
+            false, false, false,
+            false, false, false,
+            false, false, false]
+        paintFlagList[index] = true
+        console.log(paintFlagList)
+    }
+
     /*计算终点*/
-    function calcEndRadius() {
-        let sum = Math.pow(moveMouse.x - CENTER_X, 2) + Math.pow(CENTER_Y - moveMouse.y, 2);
+    function calcEndRadius(){
+        let sum = Math.pow(moveMouse.x-CENTER_X, 2)+ Math.pow(CENTER_Y-moveMouse.y, 2);
         let ret = calcAngle();
         // 第一个职业
-        if (sum < Math.pow(100, 2) && sum > Math.pow(50, 2)) {
-            paint("green", 75, startAngle11, ret);
-        } else if (sum < Math.pow(150, 2) && sum > Math.pow(100, 2)) {
-            paint("green", 125, startAngle12, ret);
-        } else if (sum < Math.pow(200, 2) && sum > Math.pow(150, 2)) {
-            paint("green", 175, startAngle13, ret);
+        if(sum < Math.pow(100,2) && sum > Math.pow(50,2)){
+            if(paintFlagList[0]){
+                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]){
+                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]){
+                if(paintStateFlag){
+                    paint("green", 175, startAngle13 ,ret);
+                    paint("green", 125, startAngle13 ,ret);
+                    paint("green", 75, startAngle13 ,ret);
+                }else{
+                    paint("white", 175, startAngle13 ,ret);
+                }
+            }
         }
         // 第二个职业
-        else if (sum < Math.pow(300, 2) && sum > Math.pow(250, 2)) {
-            paint("#ffd309", 275, startAngle21, ret);
-        } else if (sum < Math.pow(350, 2) && sum > Math.pow(300, 2)) {
-            paint("#ffd309", 325, startAngle22, ret);
-        } else if (sum < Math.pow(400, 2) && sum > Math.pow(350, 2)) {
-            paint("#ffd309", 375, startAngle23, ret);
+        else if(sum < Math.pow(300,2) && sum > Math.pow(250,2)){
+            if(paintFlagList[3]){
+                paint("#ffd309", 275, startAngle21 ,ret);
+            }
+        }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);
+            }
         }
     }
 
     /*计算角度0-180度*/
-    function calcAngle() {
-        let number = Math.atan2(Math.abs(CENTER_Y - startMouse.y), CENTER_X - startMouse.x);
+    function calcAngle(){
+        let number = Math.atan2(Math.abs(CENTER_Y-startMouse.y), CENTER_X-startMouse.x);
         let ret = number * 180 / Math.PI; //弧度转角度，方便调试
         if (ret > 360) {
             ret -= 360;
@@ -112,60 +178,62 @@
         if (ret < 0) {
             ret += 450;
         }
-        let num = ret * Math.PI / 180 + Math.PI;
-        // console.log('角度：'+num);
+        let num = ret * Math.PI/180 +Math.PI;
+        console.log('角度：'+num);
         return num;
     }
 
     let can = "";
     let context = "";
-
-    const backgroundImage = new Image();
-    backgroundImage.src = 'http://192.168.3.100/page-screenshot.png'; // 替换为你的背景图片路径
-
-    function init() {
+    function init(){
         can = document.getElementById('can');
         context = can.getContext('2d');
-        console.log("111")
         backgroundImage.onload = function() {
             context.drawImage(backgroundImage, 0, 0, can.width, can.height);
         };
     }
 
-
-
-
-    function arc(num) {
+    function arc(num){
         context.lineWidth = 1;
         context.strokeStyle = 'black'
         context.beginPath();
-        context.arc(CENTER_X, CENTER_Y, num, Math.PI, 2 * Math.PI, false);
+        context.arc(CENTER_X, CENTER_Y, num,  Math.PI,  2*Math.PI, false);
         context.stroke();
     }
 
 
-    function paint(color, radius, startAngle, endAngle) {
-        context.lineWidth = 50;
+    function paint(color, radius, startAngle, endAngle){
+        // 结束角度不能小于起始角度
+        if(endAngle <= startAngle){
+            return;
+        }
+        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() {
+    function clear(){
         context.clearRect(0, 0, can.width, can.height);
         drawBackground();
     }
 
-    function drawBackground() {
+    function drawBackground(){
         arc(50);
         arc(100);
         arc(150);
@@ -184,14 +252,15 @@
         arc(700);
     }
 
-    onMounted(() => {
-        init();
-        changes();
-        drawBackground();
-    });
-
     function save() {
-        capturePage()
+        html2canvas(can).then(canvas => {
+            const link = document.createElement('a');
+            link.download = 'screenshot.png';
+            link.href = canvas.toDataURL();
+            link.click();
+            document.body.removeChild(link); // 清理创建的链接
+        });
+        // capturePage()
     }
 
     const content = ref(null);
@@ -209,6 +278,12 @@
             link.click();
         });
     }
+
+    onMounted(() => {
+        init();
+        changes();
+        drawBackground();
+    });
 </script>
 
 <style scoped>
@@ -216,12 +291,4 @@
         width: 500px;
         height: 400px;
     }
-
-    .content {
-        /* 样式设置 */
-        width: 500px; /* 根据需要调整 */
-        height: auto; /* 根据内容自动调整 */
-        padding: 20px;
-        border: 1px solid #ccc;
-    }
-</style>
+</style>

src/views/xjc-integratedmachine/common/ai/TouchColorCanvasBak.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,6 +19,10 @@
     let startMouse = { x: 0, y: 0 };
     let moveMouse = { x: 0, y: 0 };
 
+    // 画笔橡皮擦状态，true画笔，false橡皮
+    let paintStateFlag = true;
+    let paintStateFlagText = ref('画笔');
+
     // 第一个职业
     let startAngle11 = 0;
     let startAngle12 = 0;
@@ -29,6 +33,15 @@
     let startAngle22 = 0;
     let startAngle23 = 0;
 
+    // 所有轨道绘画限制
+    let paintFlagList = [
+        false, false, false,
+        false, false, false,
+        false, false, false,
+        false, false, false,
+        false, false, false,
+        false, false, false]
+
     let undoList = []; // 用于保存所有操作，用于撤销和重做
     let redoList = []; // 用于保存所有撤销的操作，用于重做
 
@@ -60,40 +73,94 @@
         // 第一个职业
         if(sum < Math.pow(100,2) && sum > Math.pow(50,2)){
             startAngle11 = calcAngle();
+            calcPaintCircleFlag(0)
         }else if(sum < Math.pow(150,2) && sum > Math.pow(100,2)){
             startAngle12 = calcAngle();
+            calcPaintCircleFlag(1)
         }else if(sum < Math.pow(200,2) && sum > Math.pow(150,2)){
             startAngle13 = calcAngle();
+            calcPaintCircleFlag(2)
         }
         // 第二个职业
         else if(sum < Math.pow(300,2) && sum > Math.pow(250,2)){
             startAngle21 = calcAngle();
+            calcPaintCircleFlag(3)
         }else if(sum < Math.pow(350,2) && sum > Math.pow(300,2)){
             startAngle22 = calcAngle();
+            calcPaintCircleFlag(4)
         }else if(sum < Math.pow(400,2) && sum > Math.pow(350,2)){
             startAngle23 = calcAngle();
+            calcPaintCircleFlag(5)
         }
     }
 
+    /**
+     * 只有起始点所在轨道可以绘制
+     **/
+    function calcPaintCircleFlag(index){
+        paintFlagList = [
+            false, false, false,
+            false, false, false,
+            false, false, false,
+            false, false, false,
+            false, false, false,
+            false, false, false]
+        paintFlagList[index] = true
+        console.log(paintFlagList)
+    }
+
     /*计算终点*/
     function calcEndRadius(){
         let sum = Math.pow(moveMouse.x-CENTER_X, 2)+ Math.pow(CENTER_Y-moveMouse.y, 2);
         let ret = calcAngle();
         // 第一个职业
         if(sum < Math.pow(100,2) && sum > Math.pow(50,2)){
-            paint("green", 75, startAngle11 ,ret);
+            if(paintFlagList[0]){
+                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)){
-            paint("green", 125, startAngle12 ,ret);
+            if(paintFlagList[1]){
+                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)){
-            paint("green", 175, startAngle13 ,ret);
+            if(paintFlagList[2]){
+                if(paintStateFlag){
+                    paint("green", 175, startAngle13 ,ret);
+                    paint("green", 125, startAngle13 ,ret);
+                    paint("green", 75, startAngle13 ,ret);
+                }else{
+                    paint("white", 175, startAngle13 ,ret);
+                }
+            }
         }
         // 第二个职业
         else if(sum < Math.pow(300,2) && sum > Math.pow(250,2)){
-            paint("#ffd309", 275, startAngle21 ,ret);
+            if(paintFlagList[3]){
+                paint("#ffd309", 275, startAngle21 ,ret);
+            }
         }else if(sum < Math.pow(350,2) && sum > Math.pow(300,2)){
-            paint("#ffd309", 325, startAngle22 ,ret);
+            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)){
-            paint("#ffd309", 375, startAngle23 ,ret);
+            if(paintFlagList[5]){
+                paint("#ffd309", 375, startAngle23 ,ret);
+                paint("#ffd309", 325, startAngle23 ,ret);
+                paint("#ffd309", 275, startAngle23 ,ret);
+            }
         }
     }
 
@@ -108,7 +175,7 @@
             ret += 450;
         }
         let num = ret * Math.PI/180 +Math.PI;
-        // console.log('角度：'+num);
+        console.log('角度：'+num);
         return num;
     }
 
@@ -129,19 +196,29 @@
 
 
     function paint(color, radius, startAngle, endAngle){
-        context.lineWidth = 50;
+        // 结束角度不能小于起始角度
+        if(endAngle <= startAngle){
+            return;
+        }
+        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(){
@@ -167,7 +244,6 @@
 
         arc(700);
     }
-
     onMounted(() => {
         init();
         changes();