68 lines
1.7 KiB
TypeScript
68 lines
1.7 KiB
TypeScript
import { OperationType, OperationTypes } from "../tools/layerHelper";
|
|
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
|
|
tools = [
|
|
OperationType.RECTANGLE
|
|
]
|
|
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() { }
|
|
}
|