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; const width = e.absolutePointer.x - this.startX const height = e.absolutePointer.y - this.startY this.demoObject.set({ width, height }) this.canvasManager.canvas.renderAll() } mouseUpEvent(e) { if (!this.isDragging) return; this.isDragging = false; var width = e.absolutePointer.x - this.startX var height = e.absolutePointer.y - this.startY if(width === 0) width = 50 if(height === 0) height = 50 this.demoObject.set({ width, height }) const object = this.demoObject.toJSON("evented") if(object.width < 0) { object.left += object.width object.width = -object.width } if(object.height < 0) { object.top += object.height object.height = -object.height } this.layerManager.createRectLayer(object, true) this.canvasManager.canvas.remove(this.demoObject) this.canvasManager.canvas.renderAll() } dispose() { } }