From ed5b946e8fdd6a20e77736fd13e95abb264789c6 Mon Sep 17 00:00:00 2001 From: bighuixiang <472705331@qq.com> Date: Fri, 26 Sep 2025 01:12:56 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96CanvasEditor=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E4=BB=A3=E7=A0=81=E6=A0=BC=E5=BC=8F=EF=BC=8C=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=E9=83=A8=E5=88=86=E6=B3=A8=E9=87=8A=E5=92=8C=E7=BC=A9?= =?UTF-8?q?=E8=BF=9B=E9=97=AE=E9=A2=98=EF=BC=8C=E6=8F=90=E5=8D=87=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E5=8F=AF=E8=AF=BB=E6=80=A7=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/Canvas/CanvasEditor/index.vue | 191 ++++++++++---------- 1 file changed, 95 insertions(+), 96 deletions(-) diff --git a/src/component/Canvas/CanvasEditor/index.vue b/src/component/Canvas/CanvasEditor/index.vue index 0937e2d1..917c14bc 100644 --- a/src/component/Canvas/CanvasEditor/index.vue +++ b/src/component/Canvas/CanvasEditor/index.vue @@ -20,11 +20,10 @@ import { SelectionManager } from "./managers/selection/SelectionManager"; import { RedGreenModeManager } from "./managers/RedGreenModeManager"; import texturePresetManager from "./managers/brushes/TexturePresetManager"; import { BrushStore } from "./store/BrushStore"; -import cuowuImg from '@/assets/images/homePage/cuowu.svg' +import cuowuImg from "@/assets/images/homePage/cuowu.svg"; import { Https } from "@/tool/https"; -import SelectImages from '@/component/common/SelectImages.vue' -import { UrlToFile } from '@/tool/util' - +import SelectImages from "@/component/common/SelectImages.vue"; +import { UrlToFile } from "@/tool/util"; // import { MinimapManager } from "./managers/minimap/MinimapManager"; @@ -105,14 +104,16 @@ const props = defineProps({ type: Boolean, default: false, // 是否显示固定图层 }, - isGeneral: { // 从generalMiniCanvas来的 + isGeneral: { + // 从generalMiniCanvas来的 type: Boolean, - default:false + default: false, }, - isEdit: { // 从design点击喜欢过的图片,再点击顶部的编辑图标 + isEdit: { + // 从design点击喜欢过的图片,再点击顶部的编辑图标 type: Boolean, - default: false - } + default: false, + }, }); // 引用和状态 @@ -269,7 +270,7 @@ onMounted(async () => { layerManager, activeTool, // 响应式引用，存储当前选中的工具 brushSize: brushSize.value, // 可选，初始画笔大小 - t, // 国际化函数 + t, // 国际化函数 }); // 初始化文本编辑功能 @@ -416,10 +417,9 @@ onMounted(async () => { canvasManagerLoaded.value = true; - // 添加删除按钮 - // if(!fabric.Object.prototype.controls.deleteControl)addRemoveBtn(removeLayer) - addRemoveBtn(removeLayer) - + // 添加删除按钮 + // if(!fabric.Object.prototype.controls.deleteControl)addRemoveBtn(removeLayer) + addRemoveBtn(removeLayer); // 触发组件初始化事件 nextTick(() => { @@ -468,15 +468,15 @@ onMounted(async () => { // 使用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); // 设置画布缩放 - } + 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); // 设置画布缩放 + } }); watchEffect(() => { @@ -518,7 +518,7 @@ onBeforeUnmount(() => { liquifyManager = null; selectionManager = null; redGreenModeManager = null; -// fabric.Object.prototype.controls.deleteControl = undefined; + // fabric.Object.prototype.controls.deleteControl = undefined; // 移除window resize事件监听 // window.removeEventListener("resize", handleWindowResize); @@ -542,22 +542,16 @@ function resetZoom() { canvasManager.resetZoom(); } function setZoom(zoom) { - setTimeout(()=>{ - if (!canvasManager) return; - const newZoom = Math.max(zoom, 0.1); // 最小0.1倍 - -function setZoom(zoom) { - setTimeout(()=>{ - if (!canvasManager) return; - const newZoom = Math.max(zoom, 0.1); // 减少10%，最小0.1倍 - // 使用画布中心作为缩放点 - const centerPoint = { - x: canvasManager.canvas.width / 2, - y: canvasManager.canvas.height / 2, - }; - - canvasManager.animateZoom(centerPoint, newZoom); - }) + setTimeout(() => { + if (!canvasManager) return; + const newZoom = Math.max(zoom, 0.1); + // 使用画布中心作为缩放点 + const centerPoint = { + x: canvasManager.canvas.width / 2, + y: canvasManager.canvas.height / 2, + }; + canvasManager.animateZoom(centerPoint, newZoom); + }); } function zoomIn() { @@ -651,35 +645,36 @@ function moveLayerDown(layerId) { layerManager.moveLayer(layerId, "down"); } -function addRemoveBtn(fun){//添加删除按钮 - const deleteIcon = cuowuImg - // 创建删除图片元素 - let deleteImg = document.createElement('img') - deleteImg.src = deleteIcon - function renderIcon(icon) { - return function (ctx, left, top, styleOverride, fabricObject) { - var size = this.cornerSize; - ctx.save(); - ctx.translate(left, top); - ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle)); - ctx.drawImage(icon, -size/3, -size/3, size/1.5, size/1.5); - ctx.restore(); - } - } - fabric.Object.prototype.controls.deleteControl = new fabric.Control({ - x: 0.5, - y: -0.5, - offsetY: -16, - offsetX: 16, - cursorStyle: 'pointer', - mouseUpHandler:deleteFun, - render: renderIcon(deleteImg), - cornerSize: 24 - }) +function addRemoveBtn(fun) { + //添加删除按钮 + const deleteIcon = cuowuImg; + // 创建删除图片元素 + let deleteImg = document.createElement("img"); + deleteImg.src = deleteIcon; + function renderIcon(icon) { + return function (ctx, left, top, styleOverride, fabricObject) { + var size = this.cornerSize; + ctx.save(); + ctx.translate(left, top); + ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle)); + ctx.drawImage(icon, -size / 3, -size / 3, size / 1.5, size / 1.5); + ctx.restore(); + }; + } + fabric.Object.prototype.controls.deleteControl = new fabric.Control({ + x: 0.5, + y: -0.5, + offsetY: -16, + offsetX: 16, + cursorStyle: "pointer", + mouseUpHandler: deleteFun, + render: renderIcon(deleteImg), + cornerSize: 24, + }); } -function deleteFun(){ - removeLayer(layerManager.activeLayerId.value) +function deleteFun() { + removeLayer(layerManager.activeLayerId.value); } function removeLayer(layerId) { @@ -746,14 +741,14 @@ function handleImageUpload(event) { const selectImages = ref(null); const handleImageSelect = (data) => { - UrlToFile(data.url,data.name).then((file)=>{ - handleImageUpload({ target: { files: [file] } }) - }) -} + UrlToFile(data.url, data.name).then((file) => { + handleImageUpload({ target: { files: [file] } }); + }); +}; function triggerLibrary() { // console.log('CanvasEditor', '打开收藏') - if (props.isGeneral || props.isEdit) { - selectImages.value.init() + if (props.isGeneral || props.isEdit) { + selectImages.value.init(); } else { emit("trigger-library"); } @@ -856,14 +851,14 @@ const changeCanvas = async (command) => { ...command, // 传递完整的命令数据 }; emit("changeCanvas", commandData); - if(command.canUndo || command.canRedo){ - setTimeout(async ()=>{ - const imageData = await canvasManager.exportImage({ - restoreOpacityInRedGreen: true, // 恢复红绿图模式下的透明度 - isCropByBg:true, - }); - emit("trigger-red-green-mouseup", imageData); - },100) + if (command.canUndo || command.canRedo) { + setTimeout(async () => { + const imageData = await canvasManager.exportImage({ + restoreOpacityInRedGreen: true, // 恢复红绿图模式下的透明度 + isCropByBg: true, + }); + emit("trigger-red-green-mouseup", imageData); + }, 100); } }; @@ -937,7 +932,7 @@ defineExpose({ layerId = "", // 导出具体图层ID layerIdArray = [], // 导出多个图层ID数组 expPicType = "png", // 导出图片类型 JPG 或 PNG ,SVG - isEnhanceImg, // 是否是增强图片 + isEnhanceImg, // 是否是增强图片 } = {}) => { return canvasManager.exportImage({ isContainBg, @@ -946,7 +941,7 @@ defineExpose({ layerId, layerIdArray, expPicType, - isEnhanceImg, + isEnhanceImg, }); }, /** @@ -1101,12 +1096,15 @@ defineExpose({ @undo-redo-status-changed="changeCanvas" @trigger-library="triggerLibrary" > - @@ -1244,7 +1242,8 @@ defineExpose({ flex-direction: column; /* height: 100vh; */ background-color: #ffffff; - font-family: pingfang_medium, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + font-family: pingfang_medium, -apple-system, BlinkMacSystemFont, "Segoe UI", + sans-serif; position: absolute; left: 0; right: 0;