123

src/components/Canvas/DepthCanvas/manager/CanvasManager.ts

@@ -15,6 +15,9 @@ interface CanvasInitOptions {
 }
 export class CanvasManager {
 	stateManager: any
+	layerManager: any
+	animationManager: any
+	eventManager: any
 	deviceInfo: any
 	canvas: any
 	canvasViewWidth: number
@@ -22,8 +25,6 @@ export class CanvasManager {
 	canvasWidth: number
 	canvasHeight: number
 	currentZoom: any
-	animationManager: any
-	eventManager: any
 	constructor(options) {
 		this.stateManager = options.stateManager;
 		this.deviceInfo = detectDeviceType();
@@ -34,6 +35,7 @@ export class CanvasManager {
 		this.canvasViewHeight = options.canvasViewHeight || 1080
 	}
 	initCanvas(options: CanvasInitOptions) {
+		this.layerManager = this.stateManager.layerManager
 		this.setCanvasViewSize(options)
 		this.canvasWidth = options.canvasWidth || 750
 		this.canvasHeight = options.canvasHeight || 600
@@ -62,7 +64,11 @@ export class CanvasManager {
 			top: 20,
 			width: 100,
 			height: 100,
-			fill: '#f00'
+			fill: '#f00',
+			info: {
+				id: 'rect1',
+				name: 'rect1',
+			}
 		})
 		this.canvas.add(rect)
 		//创建圆形
@@ -70,9 +76,37 @@ export class CanvasManager {
 			left: 200,
 			top: 200,
 			radius: 50,
-			fill: '#0f0'
+			fill: '#0f0',
+			info: {
+				id: 'circle',
+				name: 'circle',
+			}
 		})
 		this.canvas.add(circle)
+		// 文字
+		const text = new fabric.Text('Hello World', {
+			left: 300,
+			top: 300,
+			fontSize: 24,
+			fill: '#000',
+			info: {
+				id: 'text1',
+				name: 'text',
+			}
+		})
+		this.canvas.add(text)
+		// 文字
+		const text2 = new fabric.Text('Hello World', {
+			left: 300,
+			top: 300,
+			fontSize: 24,
+			fill: '#000',
+			info: {
+				id: 'text2',
+				name: 'tex2t',
+			}
+		})
+		this.canvas.add(text2)
 		this.animationManager = new AnimationManager(this.canvas, {
 			currentZoom: this.currentZoom,
 			canvasManager: this,
@@ -81,9 +115,9 @@ export class CanvasManager {
 			defaultDuration: 0.3, // 缩短默认动画时间
 		});
 		this.setupCanvasEvents()
-		this.stateManager.toolManager.setTool(OperationType.PAN)
-
-
+		this.stateManager.toolManager.setTool(OperationType.SELECT)
+		this.layerManager.updateLayers()
+		this.layerManager.setActiveID(text2.info.id)
 	}
 	setupCanvasEvents() {
 		// 创建画布事件管理器
@@ -98,7 +132,36 @@ export class CanvasManager {
 	resetZoom() {
 		this.animationManager.resetZoom()
 	}
+	getObjects() {
+		return this.canvas.getObjects() || []
+	}
+	getObjectById(id: string) {
+		return this.getObjects().find((item: any) => item.info.id === id)
+	}
+	renderAll() {
+		this.canvas.renderAll()
+	}
 
+	deleteObjectById(id: string) {
+		const object = this.getObjectById(id)
+		if (object) {
+			this.canvas.remove(object)
+			this.layerManager.updateLayers()
+			this.renderAll()
+		}
+	}
+	// 拖拽排序
+	dragSort(id, newIndex) {
+		this.canvas.moveTo(this.getObjectById(id), newIndex)
+		this.layerManager.updateLayers()
+		this.renderAll()
+	}
+	getBitObjects() {
+		return this.getObjects().map(v => {
+			const object = v.toJSON("info");
+			return object
+		})
+	}
 
 
 }