diff --git a/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts b/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts index 3e1877b..6ef50e7 100644 --- a/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts +++ b/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts @@ -101,12 +101,15 @@ export class AISelectboxToolManager { } createIndicatorObject() { this.clearIndicatorObject() + var color = 'rgba(0, 255, 0, 0.5)' + if (this.toolManager.currentTool.value === OperationType.AISELECT_REMOVE) { + color = 'rgba(255, 0, 0, 0.5)' + } const rect = new fabric.Rect({ left: this.startX, - top: this.startY, width: 0, height: 0, - fill: 'transparent', + fill: color, stroke: '#000', strokeWidth: 1, evented: false, diff --git a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts index 3bee2a9..b44032e 100644 --- a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts +++ b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts @@ -101,8 +101,6 @@ export class CanvasManager { }) } this.canvas = createCanvas(options.canvasRef.value, { - preserveObjectStacking: true, - enableRetinaScaling: true, backgroundColor: '#fff', }) if (image) { diff --git a/src/components/Canvas/DepthCanvas/tools/canvasFactory.js b/src/components/Canvas/DepthCanvas/tools/canvasFactory.js index 67395a7..8bfdc16 100644 --- a/src/components/Canvas/DepthCanvas/tools/canvasFactory.js +++ b/src/components/Canvas/DepthCanvas/tools/canvasFactory.js @@ -6,8 +6,9 @@ import { fabric } from "fabric-with-all"; export const createCanvas = (elementId, options = {}) => { // Create the canvas instance const canvas = new fabric.Canvas(elementId, { - enableRetinaScaling: true, - renderOnAddRemove: false, + controlsAboveOverlay: true,// 控制面板在图层之上 + enableRetinaScaling: true,// 启用Retina缩放 + renderOnAddRemove: false,// 不在添加或移除对象时重新渲染 preserveObjectStacking: true, // 保持对象堆叠顺序 // skipOffscreen: true, // 跳过离屏渲染 imageSmoothingEnabled: true, // 启用图像平滑 - 抗锯齿 @@ -26,7 +27,7 @@ export const createCanvas = (elementId, options = {}) => { */ export const createStaticCanvas = (elementId, options = {}) => { const canvas = new fabric.StaticCanvas(elementId, { - enableRetinaScaling: true, + enableRetinaScaling: true,// 启用Retina缩放 imageSmoothingEnabled: true, // 启用图像平滑 - 抗锯齿 imageSmoothingQuality: "high", // 设置高质量图像平滑 skipOffscreen: false, // 不跳过离屏渲染