fix: 颜色格式修改

src/view/case/draw/board/editCAD/Geometry/Arrow.js

@@ -10,7 +10,7 @@ export default class Arrow extends Geometry {
         this.startPoint = startPoint
         this.endPoint = endPoint
         this.floor = floor?floor:0
-        this.color = 'black';
+        this.color = 'rgba(	0,0,0,1)';
         this.geoType = VectorType.Arrow
         this.setId(vectorId)
     }

src/view/case/draw/board/editCAD/Geometry/Circle.js

@@ -11,7 +11,7 @@ export default class Circle extends Geometry {
         this.radius = radius
         this.points = [];                       //顺时针
         this.setPoints()
-        this.color = 'black';
+        this.color = 'rgba(0,0,0,1)';
         this.floor = floor?floor:0
         this.geoType = VectorType.Circle
         this.setId(vectorId)

src/view/case/draw/board/editCAD/Geometry/Rectangle.js

@@ -11,7 +11,7 @@ export default class Rectangle extends Geometry {
         this.floor = floor?floor:0
         this.angle = 0;
         this.setPoints(leftTopPosition,rightDownPosition)
-        this.color = 'black';
+        this.color = 'rgba(0,0,0,1)';
         this.geoType = VectorType.Rectangle
         this.setId(vectorId)
     }

src/view/case/draw/board/editCAD/Geometry/Tag.js

@@ -15,7 +15,7 @@ export default class Tag extends Geometry {
         this.sideWidth = 30 //像素
         this.sideThickness = 30 //像素
 
-        this.color = 'black';
+        this.color = 'rgba(0,0,0,1)';
         this.fontSize = 12;
 
         this.geoType = VectorType.Tag

src/view/case/draw/board/editCAD/Geometry/Wall.js

@@ -7,7 +7,7 @@ export default class Wall extends Geometry {
         this.start = pointId1
         this.end = pointId2
         this.floor = floor?floor:0
-        this.color = 'black';
+        this.color = 'rgba(0,0,0,1)';
         this.geoType = VectorType.Wall
         this.setId(vectorId)
     }

src/view/case/draw/board/editCAD/Renderer/Draw.js

@@ -1082,7 +1082,7 @@ export default class Draw {
 
         this.context.save()
         this.context.strokeStyle = Style.Sign.strokeStyle
-        this.context.fillStyle = "black";
+        this.context.fillStyle = "rgba(0,0,0,1)";
 
         if (selectItem && selectItem.type == VectorType.Cigaret) {
             if (geometry.vectorId == selectItem.vectorId) {
@@ -1190,7 +1190,7 @@ export default class Draw {
         this.context.strokeStyle="rgba(0,0,0,0)";
         this.context.miterLimit=4;
         this.context.font="15px ''";
-        this.context.fillStyle="#FF4D4F";
+        this.context.fillStyle="rgba(255,77,79,1)";
 
         if (selectItem && selectItem.type == VectorType.FirePoint) {
             if (geometry.vectorId == selectItem.vectorId) {
@@ -1262,7 +1262,7 @@ export default class Draw {
         this.context.strokeStyle="rgba(0,0,0,0)";
         this.context.miterLimit=4;
         this.context.font="15px ''";
-        this.context.fillStyle="black";
+        this.context.fillStyle="rgba(0,0,0,1)";
 
         if (selectItem && selectItem.type == VectorType.LeftFootPrint) {
             if (geometry.vectorId == selectItem.vectorId) {
@@ -1373,7 +1373,7 @@ export default class Draw {
         this.context.strokeStyle="rgba(0,0,0,0)";
         this.context.miterLimit=4;
         this.context.font="15px ''";
-        this.context.fillStyle="black";
+        this.context.fillStyle="rgba(0,0,0,1)";
 
         if (selectItem && selectItem.type == VectorType.RightFootPrint) {
             if (geometry.vectorId == selectItem.vectorId) {
@@ -1483,7 +1483,7 @@ export default class Draw {
         this.context.save()
         this.context.strokeStyle="rgba(0,0,0,0)";
         this.context.miterLimit=4;
-        this.context.fillStyle="black";
+        this.context.fillStyle="rgba(0,0,0,1)";
         this.context.font="   15px ''";
 
         if (selectItem && selectItem.type == VectorType.LeftShoePrint) {
@@ -1555,7 +1555,7 @@ export default class Draw {
         this.context.strokeStyle="rgba(0,0,0,0)";
         this.context.miterLimit=4;
         this.context.font="15px ''";
-        this.context.fillStyle="black";
+        this.context.fillStyle="rgba(0,0,0,1)";
 
         if (selectItem && selectItem.type == VectorType.RightShoePrint) {
             if (geometry.vectorId == selectItem.vectorId) {
@@ -1626,7 +1626,7 @@ export default class Draw {
         this.context.strokeStyle="rgba(0,0,0,0)";
         this.context.miterLimit=4;
         this.context.font="15px ''";
-        this.context.fillStyle="black";
+        this.context.fillStyle="rgba(0,0,0,1)";
 
         if (selectItem && selectItem.type == VectorType.FingerPrint) {
             if (geometry.vectorId == selectItem.vectorId) {
@@ -1890,7 +1890,7 @@ export default class Draw {
         this.context.strokeStyle="rgba(0,0,0,0)";
         this.context.miterLimit=4;
         this.context.font="15px ''";
-        this.context.fillStyle="#FF4D4F";
+        this.context.fillStyle="rgba(255,77,79,1)";
 
         if (selectItem && selectItem.type == VectorType.BloodStain) {
             if (geometry.vectorId == selectItem.vectorId) {

src/view/case/draw/board/editCAD/Renderer/Render.js

@@ -240,15 +240,15 @@ export default class Render {
         draw.clear()
 
         if (styleType == 'style-1') {
-            draw.drawBackGround('#FFFFFF')
+            draw.drawBackGround('rgba(255,255,255,1)')
             this.redrawRooms(floorplanService.getCurrentFloor())
         } else if (styleType == 'style-2') {
-            draw.drawBackGround('#000000')
+            draw.drawBackGround('rgba(0,0,0,1)')
             this.redrawRooms(floorplanService.getCurrentFloor())
         } else if (styleType == 'style-3') {
-            draw.drawBackGround('#FFFFFF')
+            draw.drawBackGround('rgba(255,255,255,1)')
         } else if (styleType == 'style-4') {
-            draw.drawBackGround('#000000')
+            draw.drawBackGround('rgba(0,0,0,1)')
         }
 
         let data = floorplanService.getFloorData()

src/view/case/draw/board/editCAD/Renderer/oldDraw.js

@@ -1061,7 +1061,7 @@ export default class Draw {
 
         this.context.save()
         this.context.strokeStyle = Style.Sign.strokeStyle
-        this.context.fillStyle = "black";
+        this.context.fillStyle = "rgba(0,0,0,1)";
 
         if (selectItem && selectItem.type == VectorType.Cigaret) {
             if (geometry.vectorId == selectItem.vectorId) {
@@ -1241,7 +1241,7 @@ export default class Draw {
         this.context.strokeStyle="rgba(0,0,0,0)";
         this.context.miterLimit=4;
         this.context.font="15px ''";
-        this.context.fillStyle="black";
+        this.context.fillStyle="rgba(0,0,0,1)";
 
         if (selectItem && selectItem.type == VectorType.LeftFootPrint) {
             if (geometry.vectorId == selectItem.vectorId) {
@@ -1352,7 +1352,7 @@ export default class Draw {
         this.context.strokeStyle="rgba(0,0,0,0)";
         this.context.miterLimit=4;
         this.context.font="15px ''";
-        this.context.fillStyle="black";
+        this.context.fillStyle="rgba(0,0,0,1)";
 
         if (selectItem && selectItem.type == VectorType.RightFootPrint) {
             if (geometry.vectorId == selectItem.vectorId) {
@@ -1462,7 +1462,7 @@ export default class Draw {
         this.context.save()
         this.context.strokeStyle="rgba(0,0,0,0)";
         this.context.miterLimit=4;
-        this.context.fillStyle="black";
+        this.context.fillStyle="rgba(0,0,0,1)";
         this.context.font="   15px ''";
 
         if (selectItem && selectItem.type == VectorType.LeftShoePrint) {
@@ -1534,7 +1534,7 @@ export default class Draw {
         this.context.strokeStyle="rgba(0,0,0,0)";
         this.context.miterLimit=4;
         this.context.font="15px ''";
-        this.context.fillStyle="black";
+        this.context.fillStyle="rgba(0,0,0,1)";
 
         if (selectItem && selectItem.type == VectorType.RightShoePrint) {
             if (geometry.vectorId == selectItem.vectorId) {
@@ -1605,7 +1605,7 @@ export default class Draw {
         this.context.strokeStyle="rgba(0,0,0,0)";
         this.context.miterLimit=4;
         this.context.font="15px ''";
-        this.context.fillStyle="black";
+        this.context.fillStyle="rgba(0,0,0,1)";
 
         if (selectItem && selectItem.type == VectorType.FingerPrint) {
             if (geometry.vectorId == selectItem.vectorId) {
@@ -1759,7 +1759,7 @@ export default class Draw {
         this.context.strokeStyle="rgba(0,0,0,0)";
         this.context.miterLimit=4;
         this.context.font="15px ''";
-        this.context.fillStyle="#040101";
+        this.context.fillStyle="rgba(4,1,1,1)";
 
         if (selectItem && selectItem.type == VectorType.DeadBody) {
             if (geometry.vectorId == selectItem.vectorId) {
@@ -1869,7 +1869,7 @@ export default class Draw {
         this.context.strokeStyle="rgba(0,0,0,0)";
         this.context.miterLimit=4;
         this.context.font="15px ''";
-        this.context.fillStyle="#FF4D4F";
+        this.context.fillStyle="rgba(255,77,79,1)";
 
         if (selectItem && selectItem.type == VectorType.BloodStain) {
             if (geometry.vectorId == selectItem.vectorId) {

src/view/case/draw/board/editCAD/Style.js

@@ -1,6 +1,6 @@
 const Style = {
     Wall: {
-        strokeStyle: '#000000',
+        strokeStyle: 'rgba(0,0,0,1)',
         lineWidth: 2,
         error: {
             strokeStyle: 'rgba(255,0,0,0.5)',
@@ -8,191 +8,191 @@ const Style = {
         },
     },
     Point: {
-        strokeStyle: 'green',
-        fillStyle: 'rgb(0, 200, 175)',
+        strokeStyle: 'rgba(0,128,0, 1)',
+        fillStyle: 'rgba(0, 200, 175, 1)',
         radius: 4,
     },
     Tag: {
-        strokeStyle: 'rgb(0,0,0,1)',
-        fillStyle: 'rgb(0,0,0,1)',
+        strokeStyle: 'rgba(0,0,0,1)',
+        fillStyle: 'rgba(0,0,0,1)',
         strokeStyle_adding: 'rgba(243, 255, 0, 0.8)',
         fillStyle_adding: 'rgba(243, 255, 0, 0.8)',
         lineWidth: 1,
     },
     Sign: {
-        strokeStyle: 'rgb(0,0,0,1)',
+        strokeStyle: 'rgba(0,0,0,1)',
         fillStyle: 'rgba(0,0,0,0)',
         lineWidth: 1,
     },
     Title: {
-        strokeStyle: 'rgb(0,0,0,1)',
-        fillStyle: 'rgb(0,0,0,1)',
+        strokeStyle: 'rgba(0,0,0,1)',
+        fillStyle: 'rgba(0,0,0,1)',
         lineWidth: 1,
     },
     Compass: {
-        strokeStyle: 'rgb(0,0,0,1)',
+        strokeStyle: 'rgba(0,0,0,1)',
         fillStyle: 'rgba(0,0,0,0)',
         lineWidth: 1,
     },
     Rectangle:{
-        strokeStyle: '#000000',
+        strokeStyle: 'rgba(0,0,0,1)',
         lineWidth: 2,
     },
     Circle:{
-        strokeStyle: '#000000',
+        strokeStyle: 'rgba(0,0,0,1)',
         lineWidth: 2,
     },
     Icon:{
-        strokeStyle: '#000000',
+        strokeStyle: 'rgba(0,0,0,1)',
         lineWidth: 2,
     },
     Arrow: {
-        strokeStyle: '#000000',
+        strokeStyle: 'rgba(0,0,0,1)',
         lineWidth: 2,
     },
     Table:{
-        strokeStyle: '#000000',
+        strokeStyle: 'rgba(0,0,0,1)',
         lineWidth: 2,
     },
     Select: {
         Wall: {
-            strokeStyle: 'green',
+            strokeStyle: 'rgba(0,128,0,1)',
         },
         Rectangle: {
-            strokeStyle: 'green',
+            strokeStyle: 'rgba(0,128,0,1)',
             fillStyle: 'rgba(243, 255, 0, 0.5)',
         },
         Circle: {
-            strokeStyle: 'green',
+            strokeStyle: 'rgba(0,128,0,1)',
             fillStyle: 'rgba(243, 255, 0, 0.5)',
         },
         Icon: {
-            strokeStyle: 'green',
+            strokeStyle: 'rgba(0,128,0,1)',
             fillStyle: 'rgba(243, 255, 0, 0.5)',
         },
         Arrow: {
-            strokeStyle: 'green',
+            strokeStyle: 'rgba(0,128,0,1)',
         },
         Tag: {
-            strokeStyle: '#00C8AF',
-            fillStyle: '#00C8AF',
+            strokeStyle: 'rgba(0,200,175,1)',
+            fillStyle: 'rgba(0,200,175,1)',
         },
         Table: {
-            //strokeStyle: 'green',
+            //strokeStyle: 'rgba(0,128,0,1)',
             //fillStyle: 'rgba(243, 255, 0, 0.5)',
-            strokeStyle: '#00C8AF',
-            fillStyle: '#00C8AF',
+            strokeStyle: 'rgba(0,200,175,1)',
+            fillStyle: 'rgba(0,200,175,1)',
         },
         Sign: {
             //strokeStyle: 'rgba(243, 255, 0, 0.8)',
             //fillStyle: 'rgba(243, 255, 0, 0.5)',
-            strokeStyle: '#00C8AF',
-            fillStyle: '#00C8AF',
+            strokeStyle: 'rgba(0,200,175,1)',
+            fillStyle: 'rgba(0,200,175,1)',
         },
         Point: {
             radius: 4,
             lineWidth: 2,
-            fillStyle: 'rgb(0, 200, 175)',
-            strokeStyle: 'green',
+            fillStyle: 'rgba(0, 200, 175,1)',
+            strokeStyle: 'rgba(0,128,0,1)',
         },
         Title: {
-            strokeStyle: '#00C8AF',
-            fillStyle: '#00C8AF',
+            strokeStyle: 'rgba(0,200,175,1)',
+            fillStyle: 'rgba(0,200,175,1)',
         },
         Compass: {
             //strokeStyle: 'rgba(243, 255, 0, 0.8)',
             //fillStyle: 'rgba(243, 255, 0, 0.5)',
-            strokeStyle: '#00C8AF',
-            fillStyle: '#00C8AF',
+            strokeStyle: 'rgba(0,200,175,1)',
+            fillStyle: 'rgba(0,200,175,1)',
         },
     },
     Focus: {
         Wall: {
-            strokeStyle: 'green',
+            strokeStyle: 'rgba(0,128,0,1)',
         },
         Rectangle: {
-            strokeStyle: 'green',
+            strokeStyle: 'rgba(0,128,0,1)',
             fillStyle: 'rgba(243, 255, 0, 0.5)',
         },
         Circle: {
-            strokeStyle: 'green',
+            strokeStyle: 'rgba(0,128,0,1)',
             fillStyle: 'rgba(243, 255, 0, 0.5)',
         },
         Icon: {
-            strokeStyle: 'green',
+            strokeStyle: 'rgba(0,128,0,1)',
             fillStyle: 'rgba(243, 255, 0, 0.5)',
         },
         Arrow: {
-            strokeStyle: 'green',
+            strokeStyle: 'rgba(0,128,0,1)',
         },
         Tag: {
-            strokeStyle: '#00C8AF',
-            fillStyle: '#00C8AF',
+            strokeStyle: 'rgba(0,200,175,1)',
+            fillStyle: 'rgba(0,200,175,1)',
         },
         Table: {
-            //strokeStyle: 'green',
+            //strokeStyle: 'rgba(0,128,0,1)',
             //fillStyle: 'rgba(243, 255, 0, 0.5)',
-            strokeStyle: '#00C8AF',
-            fillStyle: '#00C8AF',
+            strokeStyle: 'rgba(0,200,175,1)',
+            fillStyle: 'rgba(0,200,175,1)',
         },
         Sign: {
             //strokeStyle: 'rgba(243, 255, 0, 0.8)',
             //fillStyle: 'rgba(243, 255, 0, 0.5)',
-            strokeStyle: '#00C8AF',
-            fillStyle: '#00C8AF',
+            strokeStyle: 'rgba(0,200,175,1)',
+            fillStyle: 'rgba(0,200,175,1)',
         },
         Point: {
             radius: 4,
             lineWidth: 2,
             fillStyle: 'rgba(245, 255, 0, 1)',
-            strokeStyle: 'green',
+            strokeStyle: 'rgba(0,128,0,1)',
         },
         Title: {
-            strokeStyle: '#00C8AF',
-            fillStyle: '#00C8AF',
+            strokeStyle: 'rgba(0,200,175,1)',
+            fillStyle: 'rgba(0,200,175,1)',
         },
         Compass: {
             //strokeStyle: 'rgba(243, 255, 0, 0.8)',
             //fillStyle: 'rgba(243, 255, 0, 0.5)',
-            strokeStyle: '#00C8AF',
-            fillStyle: '#00C8AF',
+            strokeStyle: 'rgba(0,200,175,1)',
+            fillStyle: 'rgba(0,200,175,1)',
         },
     },
     Element: {
         StartAddWall: {
             radius: 4,
-            fillStyle: 'rgb(0, 200, 175)',
-            strokeStyle: 'green',
+            fillStyle: 'rgba(0, 200, 175, 1)',
+            strokeStyle: 'rgba(0,128,0,1)',
         },
         NewWall: {
             lineWidth: 2,
             strokeStyle: 'rgba(0,0,0,0.3)',
-            errorStrokeStyle: 'rgb(250,63,72,0.3)',
+            errorStrokeStyle: 'rgba(250,63,72,0.3)',
         },
         CheckLinesX: {
             lineWidth: 2,
-            strokeStyle: '#CED806',
+            strokeStyle: 'rgba(206,216,6,1)',
         },
         CheckLinesY: {
             lineWidth: 2,
-            strokeStyle: '#CED806',
+            strokeStyle: 'rgba(206,216,6,1)',
         },
         VCheckLinesX: {
             lineWidth: 2,
-            strokeStyle: '#CED806',
+            strokeStyle: 'rgba(206,216,6,1)',
             //strokeStyle: 'rgba(100,149,237,0.5)',
         },
         VCheckLinesY: {
             lineWidth: 2,
-            strokeStyle: '#CED806',
+            strokeStyle: 'rgba(206,216,6,1)',
             //strokeStyle: 'rgba(100,149,237,0.5)',
         },
     },
     // eslint-disable-next-line no-dupe-keys
     Title: {
         font: '24px Microsoft YaHei',
-        fillStyle: '#000000',
-        strokeStyle: '#000000',
+        fillStyle: 'rgba(0,0,0,1)',
+        strokeStyle: 'rgba(0,0,0,1)',
         textAlign: 'center',
         textBaseline: 'middle',
         miterLimit: 10,
@@ -202,8 +202,8 @@ const Style = {
     Font: {
         //font: '14px Microsoft YaHei',
         font: 'px Microsoft YaHei',
-        fillStyle: '#000000',
-        strokeStyle: '#000000',
+        fillStyle: 'rgba(0,0,0,1)',
+        strokeStyle: 'rgba(0,0,0,1)',
         textAlign: 'center',
         textBaseline: 'middle',
         miterLimit: 10,

src/view/case/draw/board/index.js

@@ -22,7 +22,7 @@ export const create = async (store, canvas) => {
   const layer = new Layer();
   await layer.start(canvas, store);
   const defaultData = {
-    color: "#000",
+    color: "rgba(0,0,0,1)",
     text: "",
     fontSize: 12,
     scale: 1,
@@ -157,7 +157,7 @@ export const create = async (store, canvas) => {
 
       const cctx = $canvas.getContext("2d");
       cctx.rect(0, 0, $canvas.width, $canvas.height);
-      cctx.fillStyle = "#fff";
+      cctx.fillStyle = 'rgba(255,255,255,1)';
       cctx.fill();
       cctx.drawImage(canvas, 0, 0, $canvas.width, $canvas.height);
 

src/view/case/draw/edit-shape/label.vue

@@ -1,6 +1,6 @@
 <template>
   <el-form-item label="颜色：">
-    <el-color-picker v-model="value" />
+    <el-color-picker v-model="value" color-format="rgba" show-alpha />
   </el-form-item>
 </template>
 <script setup lang="ts">
@@ -10,9 +10,10 @@ import { ElColorPicker } from "element-plus";
 
 const props = defineProps<{ shape: BoardShape }>();
 const emit = defineEmits<{ (e: "blur"): void }>();
-const value = ref<string>(props.shape.data.color || "#000000");
+const value = ref<string>(props.shape.data.color || "rgba(0,0,0,1)");
 
 watchEffect(() => {
+  console.log(value.value);
   props.shape.setColor(value.value);
 });
 </script>