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

package.json

@@ -23,6 +23,7 @@
     "clipboard": "2.0.11",
     "echarts": "5.6.0",
     "element-plus": "2.9.9",
+    "fabric": "^6.7.0",
     "file-saver": "2.0.5",
     "fuse.js": "6.6.2",
     "js-beautify": "1.14.11",

src/views/xjc-integratedmachine/wakeup/index.vue

@@ -1,12 +1,17 @@
 <template>
     <div style="display: flex">
-        <div style="width:20vw;height: 10vh;border: solid 1px red;border-radius: 4px">
+        <div style="width:20vw;height: 10vh;background: #85eff5;border: solid 1px #a2fffc;border-radius: 10px;cursor: pointer" @click="goto">
             生涯彩虹图
         </div>
     </div>
 </template>
 
 <script setup>
+    const router = useRouter()
+
+    function goto() {
+        router.push('/integratedmachine/wakeup/rainbow/paint')
+    }
 
 </script>
 

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

@@ -1,7 +1,47 @@
 <template>
-    生涯彩虹图
+    <canvas id="canvas" width="1000px" height="800px" style="border: 1px solid #ccc;"></canvas>
 </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)
+    }
+
+    onMounted(() => {
+        init()
+    })
+</script>
+
+
 <script>
     export default {
         name: "paint"