diff --git a/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts b/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts index 9e1407a..5fce2d0 100644 --- a/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts +++ b/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts @@ -61,19 +61,20 @@ export class AISelectboxToolManager { this.isDragging = false this.canvasManager.canvas.renderAll() } + demoObjectDefault = { + left: 0, + top: 0, + evented: false, + selectable: false, + erasable: false, + } createDemoObject() { if (this.demoObject) this.clearDemoObject() const { canvasWidth, canvasHeight } = this.canvasManager.getCanvasSize(); const canvas = document.createElement('canvas') canvas.width = canvasWidth canvas.height = canvasHeight - this.demoObject = new fabric.Image(canvas, { - left: 0, - top: 0, - evented: false, - selectable: false, - erasable: false, - }) + this.demoObject = new fabric.Image(canvas, this.demoObjectDefault) this.canvasManager.canvas.add(this.demoObject) this.canvasManager.canvas.renderAll() } @@ -100,27 +101,47 @@ export class AISelectboxToolManager { this.canvasManager.canvas.remove(this.indicatorObject) this.indicatorObject = null } - // 处理画笔绘制图像 - async handleBrushDrawImage(fabricImage: fabric.Object) { - if (!this.demoObject) return; - const tcanvas = new fabric.StaticCanvas(document.createElement("canvas"), { + // 创建临时画布对象 + async createStaticCanvas(object: fabric.Object) { + if (!this.demoObject) this.createDemoObject() + const canvas = new fabric.StaticCanvas(document.createElement("canvas"), { width: this.demoObject.width, height: this.demoObject.height, enableRetinaScaling: false, }); - const demoObject = await cloneObjects([this.demoObject]).then(v => v[0]) - tcanvas.add(demoObject) - tcanvas.add(fabricImage) + const newObject = await cloneObjects([object]).then(v => v[0]) + canvas.add(newObject) + canvas.renderAll() + return canvas + } + // 处理绘制图像 + async handleDrawImage(object: fabric.Object) { + const tcanvas = await this.createStaticCanvas(this.demoObject) + tcanvas.add(object) tcanvas.renderAll(); const canvas = getObjectAlphaToCanvas(tcanvas, null, 0, this.rgba); - const image = new fabric.Image(canvas); + this.replaceDemoObject(canvas) + } + // 处理图像删除 + async handleRemoveImage(object: fabric.Object) { + const tcanvas = await this.createStaticCanvas(this.demoObject) + const rcanvas = await this.createStaticCanvas(object) + const tempCanvas = rcanvas.toCanvasElement(); + const tempCtx = tempCanvas.getContext('2d'); + const imageData2 = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height); + const canvas = getObjectAlphaToCanvas(tcanvas, imageData2, 0, this.rgba); + this.replaceDemoObject(canvas) + } + // 替换框选对象 + async replaceDemoObject(canvas) { + const image = new fabric.Image(canvas, this.demoObjectDefault); this.canvasManager.canvas.add(image) this.canvasManager.canvas.remove(this.demoObject); this.demoObject = image; this.canvasManager.canvas.renderAll() } + mouseDownEvent(e) { - // if (true) return const tool = this.toolManager.currentTool.value const tools = [OperationType.AISELECT_ADD, OperationType.AISELECT_REMOVE] if (!tools.includes(tool)) return; @@ -153,11 +174,23 @@ export class AISelectboxToolManager { const object = this.indicatorObject.toJSON("evented") if (object.width === 0) object.width = 100 if (object.height === 0) object.height = 100 - console.log(object.top, object.left, object.width, object.height) this.clearIndicatorObject() this.canvasManager.canvas.renderAll() - // this.createSelectbox() + const rect = new fabric.Rect({ + left: object.left, + top: object.top, + width: object.width, + height: object.height, + fill: '#f00', + strokeWidth: 0, + }) + const currentTool = this.toolManager.currentTool.value + if (currentTool === OperationType.AISELECT_ADD) { + this.handleDrawImage(rect) + } else if (currentTool === OperationType.AISELECT_REMOVE) { + this.handleRemoveImage(rect) + } } @@ -180,9 +213,7 @@ export class AISelectboxToolManager { absolutePositioned: true, }; async createSelectbox() { - // const url = "http://118.31.39.42:3000/falls/1a48ed3a-1faa-4fcd-bf07-765dba1702c5.png" - // const image = await this.loadImageToObject(url) - // const fobject = this.canvasManager.canvas.clipPath + if (!this.demoObject) return const fobject = this.demoObject this.clearDemoObject() const canvas = getObjectAlphaToCanvas(fobject, null, 0, { r: 255, g: 0, b: 0, a: 255 }); @@ -208,8 +239,8 @@ export class AISelectboxToolManager { }); const group = await this.layerManager.createGroupLayer({ clipPath: path, - top: path.top, - left: path.left, + top: path.top + path.height / 2, + left: path.left + path.width / 2, }, false, false) const rect = await this.layerManager.createRectLayer({ width: path.width, diff --git a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts index 450bd2b..5c3b944 100644 --- a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts +++ b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts @@ -296,7 +296,7 @@ export class CanvasManager { if (currentTool === OperationType.DRAW) { this.handleDrawImage(fabricImage) } else if (currentTool === OperationType.AISELECT_DRAW) { - this.stateManager.aiSelectboxToolManager.handleBrushDrawImage(fabricImage) + this.stateManager.aiSelectboxToolManager.handleDrawImage(fabricImage) } return true }; diff --git a/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js b/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js index 90a4564..c94c2a2 100644 --- a/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js +++ b/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js @@ -714,7 +714,7 @@ export class CanvasEventManager { // 添加对象开始变换时的状态捕获 this.canvas.on("object:moving", (e) => { - console.log("object:moving", e); + // console.log("object:moving", e); const target = e.target; if (target._objects && target._objects.length > 0) { target._objects.forEach((object) => {