修改选中图框的样式

src/utils/safeParse.ts

@@ -1,9 +1,11 @@
 export default function safeParse(str: string) {
   let json;
+  if (!str) return str;
   try {
     json = JSON.parse(str);
   } catch (err) {
     console.error(err);
+    console.log(str);
   }
   return json;
 }

src/views/map-config/mini-map/MapBase/CameraMap.ts

@@ -2,6 +2,7 @@ import { fabric } from 'fabric';
 import cameraActiveImg from '@/assets/camera/camera-active.png';
 import cameraImg from '@/assets/camera/camera.png';
 import { MapData } from './types';
+import { fabricSetting } from './fabricSetting';
 
 export interface CameraImage extends fabric.Image {
   cameraId: string;
@@ -13,15 +14,8 @@ const isCanvas = (canvas: Canvas | null): canvas is Canvas => {
   return Boolean(canvas);
 };
 
-const imageControlStyle = {
-  borderColor: 'gray', // 边框颜色
-  cornerColor: '#ccc', // 控制角颜色
-  cornerSize: 4, // 控制角大小
-  transparentCorners: true, // 控制角填充色透明
-  hasBorders: false,
-};
-
-type OnSelect = (image: CameraImage) => unknown;
+type OnSelect = (image: CameraImage | null) => unknown;
+fabricSetting(fabric);
 
 class CameraMap {
   public canvas: fabric.Canvas | null = null;
@@ -31,6 +25,7 @@ class CameraMap {
     this.canvas = new fabric.Canvas(param.canvasId);
     this.addListener();
     this.onSelect = param.onSelect;
+    // window.canvas = this.canvas;
   }
 
   /** 监听点击事件 */
@@ -43,7 +38,6 @@ class CameraMap {
       const cameraId = target?.cameraId;
       console.log('当前选中的id是', cameraId);
       console.log(options.target);
-      if (!cameraId || !target) return;
 
       canvas.forEachObject((object) => {
         if (object === options.target) return;
@@ -51,12 +45,15 @@ class CameraMap {
           canvas.renderAll();
         });
       });
+      if (!cameraId || !target) {
+        this.onSelect(null);
+        return;
+      }
       target.setSrc(cameraActiveImg, () => {
         canvas.renderAll();
       });
-      if (target.type === 'image') {
-        this.onSelect(target);
-      }
+
+      this.onSelect(target);
     });
   }
 
@@ -99,7 +96,6 @@ class CameraMap {
         const cameraImg: CameraImage = cImg as unknown as CameraImage;
         this.setAllCameraUnActive();
         cameraImg.set({
-          ...imageControlStyle,
           left: this.getRandomPosition(),
           top: this.getRandomPosition(),
           cameraId,
@@ -155,11 +151,9 @@ class CameraMap {
       canvas.setWidth(width);
       canvas.setHeight(height);
       const objects = json.objects.map((item) => {
-        /** 在预览模式下所有的摄像头都不可选 */
         return {
           ...item,
           src: cameraImg,
-          ...imageControlStyle,
         };
       });
       canvas.loadFromJSON({ ...json, objects }, () => {

src/views/map-config/mini-map/MapBase/fabricSetting.ts

@@ -0,0 +1,28 @@
+export function fabricSetting(fabric) {
+  fabric.Object.prototype.padding = 10;
+
+  // 修改控制点的形状，默认为`rect`矩形，可选的值还有`circle`圆形
+  // fabric.Object.prototype.cornerStyle = 'circle';
+
+  // 修改控制点的大小为10px
+  fabric.Object.prototype.cornerSize = 8;
+
+  fabric.Object.prototype.controls.mtr.withConnection = true;
+  // 单独修改旋转控制点距离主体的纵向距离为-20px
+  fabric.Object.prototype.controls.mtr.offsetY = -20;
+
+  // 单独修改旋转控制点，光标移动到该点上时的样式为`pointer`，一个手的形状
+  fabric.Object.prototype.controls.mtr.cursorStyle = 'pointer';
+  /** 边框颜色 */
+  fabric.Object.prototype.borderColor = '#5687f1';
+  // 修改控制点的填充色为白色
+  fabric.Object.prototype.cornerColor = '#5687f1';
+
+  /** 隐藏x y轴的变形，只能等比例变形 */
+  fabric.Object.prototype.controls.mr.visible = false;
+  fabric.Object.prototype.controls.ml.visible = false;
+  fabric.Object.prototype.controls.mt.visible = false;
+  fabric.Object.prototype.controls.mb.visible = false;
+
+  window.fabric = fabric;
+}