FiDA_Front/src/components/Canvas/DepthCanvas/manager/RectToolManager.ts

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() { }
}