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") this.layerManager.createRectLayer(object, true) this.canvasManager.canvas.remove(this.demoObject) this.canvasManager.canvas.renderAll() } dispose() { } }