From 1e8625ef49b7a97041dfb9b46efff63ed9b6d8b7 Mon Sep 17 00:00:00 2001 From: lzp Date: Thu, 19 Mar 2026 11:00:31 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=B1=E5=BA=A6=E7=94=BB=E5=B8=83=E6=9B=B4?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Canvas/DepthCanvas/depth-canvas.vue | 17 +++-- src/components/Canvas/DepthCanvas/index.vue | 3 +- .../DepthCanvas/manager/AnimationManager.js | 5 +- .../DepthCanvas/manager/CanvasManager.ts | 74 ++++++++++--------- .../DepthCanvas/manager/LayerManager.ts | 7 +- 5 files changed, 59 insertions(+), 47 deletions(-) diff --git a/src/components/Canvas/DepthCanvas/depth-canvas.vue b/src/components/Canvas/DepthCanvas/depth-canvas.vue index ad56acf..44741ef 100644 --- a/src/components/Canvas/DepthCanvas/depth-canvas.vue +++ b/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 = () => { diff --git a/src/components/Canvas/DepthCanvas/index.vue b/src/components/Canvas/DepthCanvas/index.vue index b2cbb89..5deb00d 100644 --- a/src/components/Canvas/DepthCanvas/index.vue +++ b/src/components/Canvas/DepthCanvas/index.vue @@ -13,7 +13,8 @@ const dialogVisible = ref(false) const config = ref({ id: '', - url: '' + url: '', + json: '' }) const open = (options) => { diff --git a/src/components/Canvas/DepthCanvas/manager/AnimationManager.js b/src/components/Canvas/DepthCanvas/manager/AnimationManager.js index b49fa1a..9cd6d2d 100644 --- a/src/components/Canvas/DepthCanvas/manager/AnimationManager.js +++ b/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) diff --git a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts index 533f8b2..10d3d38 100644 --- a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts +++ b/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 */ diff --git a/src/components/Canvas/DepthCanvas/manager/LayerManager.ts b/src/components/Canvas/DepthCanvas/manager/LayerManager.ts index 96fa972..032ae2b 100644 --- a/src/components/Canvas/DepthCanvas/manager/LayerManager.ts +++ b/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