[feat][生涯唤醒一体机][试验彩虹图页面]

src/views/xjc-integratedmachine/wakeup/rainbow/paint.vue

@@ -1,43 +1,116 @@
 <template>
-    <canvas id="canvas" width="1000px" height="800px" style="border: 1px solid #ccc;"></canvas>
+    <canvas width="1800" height="800" style="border: 1px solid blue;background-color: white;" ref="canvasId"></canvas><br>
+    线宽: <input type="range" id="range">
+    颜色: <input type="color" id="color">
+    <button id="btn">清空</button>
 </template>
 
 <script setup>
-    import { onMounted } from 'vue'
-    import * as fabric from 'fabric'
-
-    function init() {
-        let canvas = new fabric.Canvas('canvas') // 实例化fabric，并绑定到canvas元素上
-        canvas.selectable = false
-        // fabric画圆弧
-        // fabric.
-        // 圆
-        let circle = new fabric.Circle({
-            left: 100,
-            top: 100,
-            radius: 50,
-        })
-
-        // 线性渐变
-        let gradient = new fabric.Gradient({
-            type: 'linear', // linear or radial
-            gradientUnits: 'pixels', // pixels or pencentage 像素 或者 百分比
-            coords: { x1: 0, y1: 0, x2: circle.width, y2: 0 }, // 至少2个坐标对（x1，y1和x2，y2）将定义渐变在对象上的扩展方式
-            colorStops:[ // 定义渐变颜色的数组
-                { offset: 0, color: 'red' },
-                { offset: 0.2, color: 'orange' },
-                { offset: 0.4, color: 'yellow' },
-                { offset: 0.6, color: 'green' },
-                { offset: 0.8, color: 'blue' },
-                { offset: 1, color: 'purple' },
-            ]
-        })
-        circle.set('fill', gradient);
-        canvas.add(circle)
+    import {ref, onMounted } from 'vue'
+
+    let canvasId = ref(null);
+    let can = canvasId.value;
+    let ctx = can.getContext('2d');
+    let mouse = { x: 0, y: 0 };
+    let last_mouse = { x: 0, y: 0 };
+
+    function changes() {
+        can.onmousedown = function (el) {
+            mouse.x = el.offsetX;
+            mouse.y = el.offsetY;
+            can.onmousemove = function (e) {
+                last_mouse.x = mouse.x;
+                last_mouse.y = mouse.y;
+                mouse.x = e.pageX - this.offsetLeft;
+                mouse.y = e.pageY - this.offsetTop;
+                line();
+            }
+        }
+        can.onmouseup = function () {
+            can.onmousemove = null;
+        }
+    }
+    changes();
+
+    range.onchange = function () {
+        if (range.value == 0) {
+            ctx.lineWidth = 1.0;
+        } else {
+            ctx.lineWidth = range.value/2;
+        }
+    }
+
+    function line() {
+        let sum = Math.pow(last_mouse.x-900, 2)+ Math.pow(800-last_mouse.y, 2);
+        if(sum > Math.pow(600,2) || sum < Math.pow(100,2)){
+            return
+        }
+        ctx.beginPath();
+        ctx.lineWidth = range.value/2;
+        ctx.strokeStyle = calcColor();
+        ctx.lineJoin = 'round';
+        // ctx.lineCap='square';
+        // moveTo起点
+        ctx.moveTo(last_mouse.x, last_mouse.y);;
+        // lineTo终点
+        ctx.lineTo(mouse.x, mouse.y);
+        /*        let currentSum = Math.pow(last_mouse.x-900, 2)+ Math.pow(800-last_mouse.y, 2);
+                ctx.moveTo(last_mouse.x, last_mouse.y);
+                ctx.arcTo(last_mouse.x, last_mouse.y, mouse.x, mouse.y, Math.sqrt(currentSum));*/
+        ctx.closePath();
+        ctx.stroke();
+    }
+
+    btn.onclick = function(){
+        ctx.clearRect(0,0,1800,800);
+        arc(100)
+        arc(200)
+        arc(300)
+        arc(400)
+        arc(500)
+        arc(600)
+    }
+
+    function calcColor(){
+        let sum = Math.pow(last_mouse.x-900, 2)+ Math.pow(800-last_mouse.y, 2);
+        if(sum < Math.pow(200,2) && sum > Math.pow(100,2)){
+            return '#AADD11'
+        }else if(sum < Math.pow(300,2) && sum > Math.pow(200,2)){
+            return '#f82ff5'
+        }else if(sum < Math.pow(400,2) && sum > Math.pow(300,2)){
+            return '#29f507'
+        }else if(sum < Math.pow(500,2) && sum > Math.pow(400,2)){
+            return '#fdca19'
+        }else{
+            return '#0000FF'
+        }
+    }
+
+    arc(100)
+    arc(200)
+    arc(300)
+    arc(400)
+    arc(500)
+    arc(600)
+
+    function arc(num){
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.arc(900, 800, num, 0,  Math.PI, true);
+        ctx.stroke();
+    }
+
+    arcTo();
+    function arcTo(){
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(70,20);
+        ctx.arcTo(120,20,120,70,50);
+        ctx.stroke();
     }
 
     onMounted(() => {
-        init()
+
     })
 </script>