深度画布联调

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

@@ -286,14 +286,19 @@ export class AnimationManager {
 	/**
 	 * 重置缩放（带平滑动画）
 	 * @param {Boolean} animated 是否使用动画
+	 * @param {Boolean} adaptive 是否自适应缩放
 	 */
-	async resetZoom(animated = true) {
+	async resetZoom(animated = true, adaptive = false) {
 		const canvasViewWidth = this.canvasManager.canvasViewWidth;
 		const canvasViewHeight = this.canvasManager.canvasViewHeight;
 		const canvasWidth = this.canvasManager.canvasWidth;
 		const canvasHeight = this.canvasManager.canvasHeight;
-		const panX = canvasViewWidth / 2 - canvasWidth / 2
-		const panY = canvasViewHeight / 2 - canvasHeight / 2
+		const scaleX = canvasViewWidth / canvasWidth * 0.8
+		const scaleY = canvasViewHeight / canvasHeight * 0.8
+		const scale = Math.min(scaleX, scaleY, 1)
+		const panX = canvasViewWidth / 2 - canvasWidth * scale / 2
+		const panY = canvasViewHeight / 2 - canvasHeight * scale / 2
+
 		return new Promise((resolve) => {
 			if (animated) {
 				// 停止任何进行中的动画
@@ -322,7 +327,7 @@ export class AnimationManager {
 
 				// 使用GSAP同时动画缩放和平移
 				gsap.to(viewTransform, {
-					zoom: 1,
+					zoom: scale,
 					panX: panX,
 					panY: panY,
 					duration: 0.5,
@@ -342,16 +347,16 @@ export class AnimationManager {
 					},
 					onComplete: () => {
 						// 确保最终状态准确
-						this.canvas.setViewportTransform([1, 0, 0, 1, panX, panY]);
-						this.currentZoom.value = 100;
+						this.canvas.setViewportTransform([scale, 0, 0, scale, panX, panY]);
+						this.currentZoom.value = scale * 100;
 						this._zoomAnimation = null;
 						this._panAnimation = null;
 						resolve();
 					},
 				});
 			} else {
-				this.canvas.setViewportTransform([1, 0, 0, 1, panX, panY]);
-				this.currentZoom.value = 100;
+				this.canvas.setViewportTransform([scale, 0, 0, scale, panX, panY]);
+				this.currentZoom.value = scale * 100;
 				resolve();
 			}
 		});

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()