Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/FiDA_Front

src/components/Canvas/DepthCanvas/depth-canvas.vue

@@ -89,14 +89,18 @@
 	const observer = ref(null)
 	onMounted(async () => {
 		keyEventManager.registerEvents()
+		const url = props.config.url || ''
+		const json = props.config.json || ''
 		await canvasManager.initCanvas({
 			canvasRef,
 			canvasViewWidth: canvasContainerRef.value.clientWidth,
 			canvasViewHeight: canvasContainerRef.value.clientHeight,
 			canvasWidth: props.config.width || 750,
 			canvasHeight: props.config.height || 600,
-			url: props.config.url || ''
+			url: json ? '' : url
 		})
+		if (!url && json) await canvasManager.loadJSON(json)
+
 		stateManager.onMounted()
 		canvasManager.onMounted()
 		layerManager.onMounted()
@@ -164,10 +168,13 @@
 		// 	a.download = 'canvas.png'
 		// 	a.click()
 		// })
-		const object = canvasManager.getCanvasDisUrlJSON()
-		console.log(object)
-		const canvas = canvasManager.processCanvasDisUrlJSON(object)
-		console.log(canvas)
+
+		console.log(canvasManager.getCanvasJSON())
+
+		// const object = canvasManager.getCanvasDisUrlJSON()
+		// console.log(object)
+		// const canvas = canvasManager.processCanvasDisUrlJSON(object)
+		// console.log(canvas)
 	}
 	// 导出到本地存储
 	const exportCanvasToLocalStorage = () => {

src/components/Canvas/DepthCanvas/index.vue

@@ -13,7 +13,8 @@
 	const dialogVisible = ref(false)
 	const config = ref({
 		id: '',
-		url: ''
+		url: '',
+		json: ''
 	})
 
 	const open = (options) => {

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

@@ -289,10 +289,7 @@ export class AnimationManager {
 	 * @param {Boolean} adaptive 是否自适应缩放
 	 */
 	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 { canvasViewWidth, canvasViewHeight, canvasWidth, canvasHeight } = this.canvasManager.getCanvasSize();
 		const scaleX = canvasViewWidth / canvasWidth * 0.8
 		const scaleY = canvasViewHeight / canvasHeight * 0.8
 		const scale = Math.min(scaleX, scaleY, 1)

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

@@ -1,5 +1,5 @@
 import { fabric } from 'fabric-with-all'
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { createCanvas } from '../tools/canvasFactory'
 import { AnimationManager } from './AnimationManager'
 import { detectDeviceType } from '../tools/index'
@@ -44,10 +44,6 @@ export class CanvasManager {
 	eventManager: any
 	deviceInfo: any
 	canvas: any
-	canvasViewWidth: number
-	canvasViewHeight: number
-	canvasWidth: number
-	canvasHeight: number
 	currentZoom: any
 	constructor(options) {
 		this.stateManager = options.stateManager;
@@ -55,23 +51,31 @@ export class CanvasManager {
 		this.currentZoom = ref(100)
 	}
 	onMounted() { }
+	getCanvasSize() {
+		return {
+			canvasViewWidth: this.canvas.width,
+			canvasViewHeight: this.canvas.height,
+			canvasWidth: this.canvas.clipPath.width,
+			canvasHeight: this.canvas.clipPath.height,
+		}
+	}
 	setCanvasViewSize(options) {
-		this.canvasViewWidth = options.canvasViewWidth || 1920
-		this.canvasViewHeight = options.canvasViewHeight || 1080
-		this.canvas.setWidth(this.canvasViewWidth)
-		this.canvas.setHeight(this.canvasViewHeight)
+		var canvasViewWidth = options.canvasViewWidth || 1920
+		var canvasViewHeight = options.canvasViewHeight || 1080
+		this.canvas.setWidth(canvasViewWidth)
+		this.canvas.setHeight(canvasViewHeight)
 	}
 	/** 初始化画布 */
 	async initCanvas(options: CanvasInitOptions) {
 		this.layerManager = this.stateManager.layerManager
-		this.canvasWidth = options.canvasWidth || 750
-		this.canvasHeight = options.canvasHeight || 600
+		var canvasWidth = options.canvasWidth || 750
+		var canvasHeight = options.canvasHeight || 600
 		var image = null;
 		if (options.url) {
 			await new Promise((resolve) => {
 				fabric.Image.fromURL(options.url, async (img) => {
-					this.canvasWidth = img.width
-					this.canvasHeight = img.height
+					canvasWidth = img.width
+					canvasHeight = img.height
 					img.set({
 						left: 0,
 						top: 0,
@@ -104,8 +108,8 @@ export class CanvasManager {
 		this.canvas.clipPath = new fabric.Rect({
 			left: 0,
 			top: 0,
-			width: this.canvasWidth,
-			height: this.canvasHeight
+			width: canvasWidth,
+			height: canvasHeight
 		})
 
 		// 动画管理器
@@ -121,12 +125,12 @@ export class CanvasManager {
 		this.setupBrushEvents()
 
 		/** 测试-开始 */
-		this.stateManager.setIsRecord(false)
-		const rect = await this.layerManager.createRectLayer({ left: 200 })
-		await this.layerManager.createStarLayer({ left: 400 })
-		await this.layerManager.createArrowLayer({ left: 600 })
-		this.layerManager.setActiveID(rect.info.id)
-		this.stateManager.setIsRecord(true)
+		// this.stateManager.setIsRecord(false)
+		// const rect = await this.layerManager.createRectLayer({ left: 200 })
+		// await this.layerManager.createStarLayer({ left: 400 })
+		// await this.layerManager.createArrowLayer({ left: 600 })
+		// this.layerManager.setActiveID(rect.info.id)
+		// this.stateManager.setIsRecord(true)
 		/** 测试-结束 */
 
 		this.resetZoom(false, true)// 画布居中
@@ -266,18 +270,22 @@ export class CanvasManager {
 		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)
+	loadJSON(json: string) {
+		return new Promise((resolve) => {
+			let jsonObj = null;
+			try {
+				jsonObj = JSON.parse(json)
+			} catch (error) {
+				console.error('JSON解析错误:', error)
+			}
+			if (!jsonObj) return resolve(false)
+			this.canvas.loadFromJSON(jsonObj, () => {
+				this.resetZoom(false)
+				this.layerManager.updateLayers()
+				this.renderAll()
+
+				resolve(true)
+			})
 		})
 	}
 	/** 导出画布为处理图片的JSON */

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

@@ -121,8 +121,8 @@ export class LayerManager {
 
 	/** 设置图层位置-不设置默认居中 */
 	setLayerPosition(object, options?: any) {
-		const width = this.canvasManager.canvasWidth
-		const height = this.canvasManager.canvasHeight
+		const width = this.canvasManager.canvas.clipPath.width
+		const height = this.canvasManager.canvas.clipPath.height
 
 		if (options && options.top !== undefined) {
 			object.set({ top: options.top })
@@ -294,8 +294,7 @@ export class LayerManager {
 
 	/** 创建图片图层 */
 	async createImageLayer(imgOrUrl: string | HTMLImageElement, options?: any, isRecord = true) {
-		const canvasWidth = this.canvasManager.canvasWidth
-		const canvasHeight = this.canvasManager.canvasHeight
+		const { canvasWidth, canvasHeight } = this.canvasManager.getCanvasSize();
 
 		const imageObject = await new Promise((resolve) => {
 			const url = typeof imgOrUrl === 'string' ? imgOrUrl : imgOrUrl.src