From cdcb18c02c28a507c5df03d2fe2e116c547145da Mon Sep 17 00:00:00 2001 From: X1627315083 <1627315083@qq.com> Date: Mon, 19 Jan 2026 17:16:20 +0800 Subject: [PATCH 1/2] fix --- src/component/Detail/DesignDetail.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/component/Detail/DesignDetail.vue b/src/component/Detail/DesignDetail.vue index e288167e..21f3f9af 100644 --- a/src/component/Detail/DesignDetail.vue +++ b/src/component/Detail/DesignDetail.vue @@ -336,6 +336,8 @@ export default defineComponent({ detailData.selectDetail.sketchString = rv }) if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail() + let otherData = await updateOtherLayers('single') + await detailDom.canvasBox.updateOtherLayers(otherData) await detailDom.canvasBox.privewDetail() for(let i = 0;i Date: Tue, 20 Jan 2026 10:31:47 +0800 Subject: [PATCH 2/2] fix --- src/component/Canvas/CanvasEditor/index.vue | 32 +++++++++++-------- .../CanvasEditor/managers/CanvasManager.js | 9 +++--- .../CanvasEditor/managers/LayerManager.js | 1 + src/component/Canvas/canvasExample.vue | 1 - 4 files changed, 23 insertions(+), 20 deletions(-) diff --git a/src/component/Canvas/CanvasEditor/index.vue b/src/component/Canvas/CanvasEditor/index.vue index 41a4c589..021dfbe1 100644 --- a/src/component/Canvas/CanvasEditor/index.vue +++ b/src/component/Canvas/CanvasEditor/index.vue @@ -499,26 +499,17 @@ onMounted(async () => { }); let trailingTimeout = null; - let throttleDelay = 100; observer = new ResizeObserver((entries) => { clearTimeout(trailingTimeout); trailingTimeout = setTimeout(() => { optimizeCanvasRendering(canvasManager.canvas, ()=> handleWindowResize()); - }, throttleDelay); + }, 200); }); observer.observe(canvasContainerRef.value); // 使用window的resize事件代替ResizeObserver // 只有当窗口大小变化时才更新画布尺寸 // window.addEventListener("resize", handleWindowResize); - if (props.config.initZoom) { - const width = canvasManager.width; - const height = canvasManager.height; - const cwidth = props.config.width; - const cheight = props.config.height; - let zoom = Math.min(1, width / cwidth, height / cheight); - if (zoom < 1) zoom -= 0.05; - setZoom(zoom); // 设置画布缩放 - } + setInitZoom(); }); watchEffect(() => { @@ -573,13 +564,26 @@ async function handleWindowResize() { // 使用requestAnimationFrame来防止频繁更新 await new Promise(requestAnimationFrame); if(!canvasManager) return; - updateCanvasSize(); + await updateCanvasSize(); // 确保显示的缩放信息是最新的 currentZoom.value = Math.round(canvasManager.canvas.getZoom() * 100); + setInitZoom(); await new Promise(requestAnimationFrame); await layerManager?.updateLayersObjectsInteractivity?.(); } +function setInitZoom(){ + if (props.config.initZoom) { + const width = canvasManager.width; + const height = canvasManager.height; + const cwidth = props.config.width; + const cheight = props.config.height; + let zoom = Math.min(1, width / cwidth, height / cheight); + if (zoom < 1) zoom -= 0.05; + setZoom(zoom); // 设置画布缩放 + } +} + function resetZoom() { canvasManager.resetZoom(); } @@ -625,13 +629,13 @@ function zoomOut() { canvasManager.animateZoom(centerPoint, newZoom); } -function updateCanvasSize() { +async function updateCanvasSize() { if (canvasManager && canvasContainerRef.value) { const containerWidth = canvasContainerRef.value.clientWidth; const containerHeight = canvasContainerRef.value.clientHeight; // 普通模式下，更新画布大小，这会同时重置视图和居中所有元素 - canvasManager.setCanvasSize(containerWidth, containerHeight); + await canvasManager.setCanvasSize(containerWidth, containerHeight); // // 如果启用了红绿图模式，使用 layerManager 的缩放方法 // if (props.enabledRedGreenMode && layerManager) { diff --git a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js index fb4866b4..426188ee 100644 --- a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js +++ b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js @@ -444,7 +444,7 @@ export class CanvasManager { } // 居中所有画布元素，包括背景层和其他元素 - this.centerAllObjects(); + await this.centerAllObjects(); // // 重新渲染画布使变更生效 // this.canvas.renderAll(); @@ -469,7 +469,6 @@ export class CanvasManager { */ async centerAllObjects() { if (!this.canvas) return; - // 获取所有可见对象（不是背景元素的对象） const allObjects = this.canvas.getObjects(); if (allObjects.length === 0) return; @@ -484,9 +483,6 @@ export class CanvasManager { // 获取背景对象 const backgroundObject = visibleObjects.find((obj) => obj.isBackground); - // !this.canvas?.clipPath && - // this.centerBackgroundLayer(this.canvas.width, this.canvas.height); - this.canvas?.clipPath?.set?.({ left: this.width / 2, top: this.height / 2, @@ -578,6 +574,9 @@ export class CanvasManager { }); }); } + + !this.canvas?.clipPath && + this.centerBackgroundLayer(this.canvas.width, this.canvas.height); // 如果有背景层，更新蒙层位置 if (backgroundObject && CanvasConfig.isCropBackground) { diff --git a/src/component/Canvas/CanvasEditor/managers/LayerManager.js b/src/component/Canvas/CanvasEditor/managers/LayerManager.js index 293590ea..4b23403f 100644 --- a/src/component/Canvas/CanvasEditor/managers/LayerManager.js +++ b/src/component/Canvas/CanvasEditor/managers/LayerManager.js @@ -697,6 +697,7 @@ export class LayerManager { * 初始化图层，确保有背景层、固定图层和一个空白图层 */ async initializeLayers() { + console.log("初始化图层",this.layers.value.length) // 如果没有任何图层，创建背景层、固定图层和一个空白图层 if (this.layers.value.length === 0) { // 创建背景图层 diff --git a/src/component/Canvas/canvasExample.vue b/src/component/Canvas/canvasExample.vue index c233f19d..ce160580 100644 --- a/src/component/Canvas/canvasExample.vue +++ b/src/component/Canvas/canvasExample.vue @@ -417,7 +417,6 @@ }" @change-canvas="changeCanvas" @canvas-init="canvasInit" - @canvas-load-json-success="canvasLoadJsonSuccess" isFixedErasable showFixedLayer >