深度画布联调

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

@@ -5,6 +5,7 @@ import { AnimationManager } from './AnimationManager'
 import { detectDeviceType } from '../tools/index'
 import { CanvasEventManager } from "./events/CanvasEventManager";
 import { OperationType } from '../tools/layerHelper'
+import { createId } from '../../tools/tools'
 
 // 自定义画布转对象属性
 fabric.Object.prototype.customProperties = ["top", "left", "width", "height", "scaleX", "scaleY", "info", "thumbnail"];
@@ -28,6 +29,7 @@ interface CanvasInitOptions {
 	canvasViewHeight?: number
 	canvasWidth?: number
 	canvasHeight?: number
+	url?: string
 }
 export class CanvasManager {
 	stateManager: any
@@ -63,17 +65,36 @@ export class CanvasManager {
 			enableRetinaScaling: true,
 			backgroundColor: '#fff',
 		})
-		this.setCanvasViewSize(options)
+		if (options.url) {
+			await new Promise((resolve, reject) => {
+				fabric.Image.fromURL(options.url, async (img) => {
+					this.canvasWidth = img.width
+					this.canvasHeight = img.height
+					this.setCanvasViewSize(options)
+					img.set({
+						left: 0,
+						top: 0,
+						scaleX: 1,
+						scaleY: 1,
+						info: {
+							id: createId("image"),
+							name: "图片图层",
+						}
+					})
+					this.canvas.add(img)
+					await this.layerManager.updateLayerThumbnailsById(img.info.id)
+					resolve(img)
+				}, { crossOrigin: 'anonymous' })
+			})
+		} else {
+			this.setCanvasViewSize(options)
+		}
 		this.canvas.clipPath = new fabric.Rect({
 			left: 0,
 			top: 0,
 			width: this.canvasWidth,
 			height: this.canvasHeight
 		})
-		// 画布居中
-		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]
 
 		// 动画管理器
 		this.animationManager = new AnimationManager(this.canvas, {
@@ -83,6 +104,7 @@ export class CanvasManager {
 			defaultEase: "power2.lin",
 			defaultDuration: 0.3, // 缩短默认动画时间
 		});
+
 		this.setupCanvasEvents()
 		this.setupBrushEvents()
 
@@ -100,11 +122,13 @@ export class CanvasManager {
 		// })
 		// // 文字
 		// const text = await this.layerManager.createTextLayer('Hello World');
-		// this.layerManager.updateLayers()
 		// this.layerManager.setActiveID(text.info.id)
 		// this.stateManager.setIsRecord(true)
 		/** 测试-结束 */
-		
+
+		this.resetZoom(false, true)// 画布居中
+
+		this.layerManager.updateLayers()
 		this.stateManager.recordState()
 		// this.stateManager.toolManager.setTool(OperationType.RECTANGLE)
 	}
@@ -147,8 +171,8 @@ export class CanvasManager {
 		if (obj) this.canvas.setActiveObject(obj)
 		this.renderAll()
 	}
-	resetZoom() {
-		this.animationManager.resetZoom()
+	resetZoom(animated = true, adaptive = true) {
+		this.animationManager.resetZoom(animated, adaptive)
 	}
 	// 使用动画管理器的缩放方法
 	animateZoom(point, targetZoom, options = {}) {
@@ -247,7 +271,6 @@ export class CanvasManager {
 			this.renderAll()
 			callback?.(true)
 		})
-
 	}
 	dispose() {
 		this.animationManager?.dispose()