深度画布功能

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

@@ -58,55 +58,20 @@ export class CanvasManager {
 		const canvasX = this.canvasViewWidth / 2 - this.canvasWidth / 2
 		const canvasY = this.canvasViewHeight / 2 - this.canvasHeight / 2
 		this.canvas.viewportTransform = [1, 0, 0, 1, canvasX, canvasY]
+
 		// 创建矩形
-		const rect = new fabric.Rect({
-			left: 20,
-			top: 20,
-			width: 100,
-			height: 100,
-			fill: '#f00',
-			info: {
-				id: 'rect1',
-				name: 'rect1',
-			}
+		const rect = this.layerManager.createRectLayer({
+			left: 400,
+			top: 100,
 		})
-		this.canvas.add(rect)
 		//创建圆形
-		const circle = new fabric.Circle({
+		const circle = this.layerManager.createCircleLayer({
 			left: 200,
 			top: 200,
-			radius: 50,
-			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)
+		const text = this.layerManager.createTextLayer('Hello World');
+
 		this.animationManager = new AnimationManager(this.canvas, {
 			currentZoom: this.currentZoom,
 			canvasManager: this,
@@ -117,18 +82,38 @@ export class CanvasManager {
 		this.setupCanvasEvents()
 		this.stateManager.toolManager.setTool(OperationType.SELECT)
 		this.layerManager.updateLayers()
-		this.layerManager.setActiveID(text2.info.id)
+		this.layerManager.setActiveID(text.info.id)
+
+
+		this.setupBrushEvents()
 	}
+	/** 画布添加对象 */
+	add(obj: any, isUpdate = true) {
+		this.canvas.add(obj)
+		if (isUpdate) {
+			this.layerManager.updateLayers()
+			this.renderAll()
+		}
+	}
+
+	/** 设置画布事件 */
 	setupCanvasEvents() {
 		// 创建画布事件管理器
 		this.eventManager = new CanvasEventManager(this.canvas, {
 			canvasManager: this,
 			animationManager: this.animationManager,
 			toolManager: this.stateManager.toolManager,
+			layerManager: this.stateManager.layerManager,
 		});
 		// 设置动画交互效果
 		this.animationManager.setupInteractionAnimations();
 	}
+	/** 设置激活对象 */
+	setActiveObjectByID(id: string) {
+		const obj = this.getObjectById(id)
+		if (obj) this.canvas.setActiveObject(obj)
+		this.renderAll()
+	}
 	resetZoom() {
 		this.animationManager.resetZoom()
 	}
@@ -163,5 +148,51 @@ export class CanvasManager {
 		})
 	}
 
+	/** 画笔事件 */
+	setupBrushEvents() {
+		this.canvas.onBrushImageConverted = async (fabricImage) => {
+			const currentTool = this.stateManager.toolManager.currentTool.value;
+			if (currentTool === OperationType.DRAW) {
+				this.handleDrawImage(fabricImage)
+			}
+			return true
+		};
+	}
+	/** 处理绘制图像 */
+	handleDrawImage(fabricImage: fabric.Object) {
+		const activeID = this.stateManager.layerManager.activeID.value
+		const activeLayer = this.getObjectById(activeID)
+		if (activeLayer) {
+			this.layerManager.imageMergeToLayer(activeLayer, fabricImage)
+		} else {
+			const emptyLayer = this.layerManager.createEmptyLayer();
+			this.layerManager.setActiveID(emptyLayer.info.id, false)
+			this.layerManager.imageMergeToLayer(emptyLayer, fabricImage)
+		}
+		return true
+	}
 
+	/** 导出画布为JSON */
+	getCanvasJSON() {
+		const keys = ["top", "left", "width", "height", "scaleX", "scaleY", "info",]
+		const json = this.canvas.toJSON(keys)
+		console.log(json, this.getObjects())
+		return JSON.stringify(json)
+	}
+	/** 加载画布JSON */
+	loadJSON(json: string, callback?: (success: boolean) => void) {
+		let jsonObj = null;
+		try {
+			jsonObj = JSON.parse(json)
+		} catch (error) {
+			console.error('JSON解析错误:', error)
+		}
+		if (!jsonObj) return callback?.(false);
+		this.canvas.loadFromJSON(jsonObj, () => {
+			this.layerManager.updateLayers()
+			this.renderAll()
+			callback?.(true)
+		})
+
+	}
 }