123

src/components/Canvas/DepthCanvas/manager/AnimationManager.js

@@ -13,7 +13,7 @@ export class AnimationManager {
 	constructor(canvas, options = {}) {
 		this.canvasManager = options.canvasManager;
 		this.canvas = canvas;
-		this.currentZoom = options.currentZoom || { value: 100 };
+		this.currentZoom = options.currentZoom;
 
 		// 动画相关属性
 		this._zoomAnimation = null;

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
+		})
+	}
 
 
 }

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

@@ -0,0 +1,46 @@
+import { ref } from 'vue'
+
+export class LayerManager {
+	stateManager: any
+	canvasManager: any
+	layers: any
+	activeID: any
+	constructor(options) {
+		this.stateManager = options.stateManager;
+		this.canvasManager = options.canvasManager;
+		this.layers = ref([])
+		this.activeID = ref("")
+	}
+	setActiveID(id: string) { this.activeID.value = id }
+	getLayerByID(id) {
+		return this.layers.value.find((item: any) => item.info.id === id)
+	}
+	setLayerNameByID(id, name: string) {
+		const layer = this.getLayerByID(id)
+		if (layer) {
+			layer.info.name = name
+			this.canvasManager.renderAll()
+		}
+	}
+	setLayerVisibleByID(id, visible: boolean) {
+		const layer = this.getLayerByID(id)
+		if (layer) {
+			layer.set({
+				visible: visible
+			})
+			this.canvasManager.renderAll()
+		}
+	}
+	deleteLayerByID(id) {
+		this.canvasManager.deleteObjectById(id)
+	}
+	// 拖拽排序
+	dragSort(id, newIndex) {
+		const index = Math.abs(this.layers.value.length - newIndex - 1)
+		this.canvasManager.dragSort(id, index)
+	}
+	// 更新图层列表
+	updateLayers() {
+		this.layers.value = this.canvasManager.getObjects().reverse()
+	}
+}

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

@@ -12,13 +12,15 @@ export class StateManager {
 	historyIndex: any
 
 	// 管理器	
-	eventManager: any
 	canvasManager: any
+	layerManager: any
+	eventManager: any
 	toolManager: any
 	// 设置管理器
 	setManager(options) {
 		options.eventManager && (this.eventManager = options.eventManager)
 		options.canvasManager && (this.canvasManager = options.canvasManager)
+		options.layerManager && (this.layerManager = options.layerManager)
 		options.toolManager && (this.toolManager = options.toolManager)
 	}
 	constructor(options) {

src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js

@@ -603,12 +603,12 @@ export class CanvasEventManager {
 	handleDragEnd(opt, isTouch = false) {
 		if (this.canvas.isDragging) {
 			// 使用动画管理器处理惯性效果
-			if (this.lastMousePositions.length > 1 && opt && opt.e) {
-				this.animationManager.applyInertiaEffect(
-					this.lastMousePositions,
-					isTouch
-				);
-			}
+			// if (this.lastMousePositions.length > 1 && opt && opt.e) {
+			// 	this.animationManager.applyInertiaEffect(
+			// 		this.lastMousePositions,
+			// 		isTouch
+			// 	);
+			// }
 		}
 
 		this.canvas.isDragging = false;