import { fabric } from 'fabric-with-all' /** 矩形工具管理器 */ export class RectToolManager { // 管理器 canvasManager: any stateManager: any layerManager: any isDragging: boolean = false startX: number = 0 startY: number = 0 demoObject: any constructor(options) { this.canvasManager = options.canvasManager this.stateManager = options.stateManager this.layerManager = options.layerManager } mouseDownEvent(e) { this.isDragging = true this.startX = e.absolutePointer.x this.startY = e.absolutePointer.y const rect = new fabric.Rect({ left: this.startX, top: this.startY, width: 0, height: 0, fill: '#000', evented: false, }) this.demoObject = rect this.canvasManager.canvas.add(rect) this.canvasManager.canvas.renderAll() } mouseMoveEvent(e) { if (!this.isDragging) return; var width = e.absolutePointer.x - this.startX var height = e.absolutePointer.y - this.startY var left = this.startX var top = this.startY if (width < 0) { left += width width = -width } if (height < 0) { top += height height = -height } this.demoObject.set({ width, height, left, top }) this.canvasManager.canvas.renderAll() } mouseUpEvent(e) { if (!this.isDragging) return; this.isDragging = false; const object = this.demoObject.toJSON("evented") if (object.width === 0) object.width = 100 if (object.height === 0) object.height = 100 this.layerManager.createRectLayer(object, true) this.canvasManager.canvas.remove(this.demoObject) this.canvasManager.canvas.renderAll() } dispose() { } }