From ca6fe65dd8824e33df63f10ff70edad5a25063b2 Mon Sep 17 00:00:00 2001 From: X1627315083 <1627315083@qq.com> Date: Mon, 26 Jan 2026 15:07:16 +0800 Subject: [PATCH 1/8] =?UTF-8?q?detail=E7=AD=89=E6=AF=94=E7=BC=A9=E6=94=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Detail/model/modelPosition copy.vue | 2 +- src/component/Detail/model/modelPosition.vue | 132 +++++++----------- 2 files changed, 55 insertions(+), 79 deletions(-) diff --git a/src/component/Detail/model/modelPosition copy.vue b/src/component/Detail/model/modelPosition copy.vue index f7524167..8ba34db3 100644 --- a/src/component/Detail/model/modelPosition copy.vue +++ b/src/component/Detail/model/modelPosition copy.vue @@ -28,7 +28,7 @@
diff --git a/src/component/Detail/model/modelPosition.vue b/src/component/Detail/model/modelPosition.vue index 8ba34db3..c688235f 100644 --- a/src/component/Detail/model/modelPosition.vue +++ b/src/component/Detail/model/modelPosition.vue @@ -219,19 +219,14 @@ export default defineComponent({ detailData.frontBack.front[selectItem.imgDomIndex].style.top = y + 'px' }); const updateElementTransform = (element, rotateDeg = null) => { - const currentTransform = element.style?.transform || ''; - // 1. 提取当前的所有rotate const currentRotates = (currentTransform.match(/rotate[XYZ]?\([^)]+\)/g) || []); - // 2. 获取除镜像和rotate外的其他所有变换 let otherTransforms = currentTransform - .replace(/scaleX\(-1\)|scaleY\(-1\)/g, '') // 移除镜像 - .replace(/rotate[XYZ]?\([^)]+\)/g, '') // 移除rotate + .replace(/scaleX\(-1\)|scaleY\(-1\)/g, '') + .replace(/rotate[XYZ]?\([^)]+\)/g, '') .replace(/\s+/g, ' ') .trim(); - // 3. 构建新transform const transforms = []; - // 镜像部分 if (element.mirror.x) transforms.push('scaleX(-1)'); if (element.mirror.y) transforms.push('scaleY(-1)'); if (otherTransforms) transforms.push(otherTransforms); @@ -246,104 +241,85 @@ export default defineComponent({ moveableInstance.value.on('scale', ({ target, delta, direction }) => { const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex]; if (!frontStyle.mirror) frontStyle.mirror = { x: false, y: false }; - - const width = parseFloat(frontStyle.style.width); - const height = parseFloat(frontStyle.style.height); + + let width = parseFloat(frontStyle.style.width); + let height = parseFloat(frontStyle.style.height); let left = parseFloat(frontStyle.style.left) || 0; let top = parseFloat(frontStyle.style.top) || 0; let rotation = 0; - // 获取原始比例 + const originalRatio = width / height; if (frontStyle.style.transform) { - const transform = frontStyle.style.transform; - const match = transform.match(/rotate\(([-\d.]+)deg\)/); - if (match) { - rotation = parseFloat(match[1]); - } + const match = frontStyle.style.transform.match(/rotate\(([-\d.]+)deg\)/); + if (match) rotation = parseFloat(match[1]); } - // 根据旋转角度重新计算控制点的方向 - function getAdjustedCorner(originalCorner, rotationAngle) { - const angleRad = rotationAngle * (Math.PI / 180); - const cosA = Math.cos(angleRad); - const sinA = Math.sin(angleRad); - const newX = originalCorner.x * cosA - originalCorner.y * sinA; - const newY = originalCorner.x * sinA + originalCorner.y * cosA; + + const getAdjustedCorner = (corner, rot) => { + const rad = rot * (Math.PI / 180); + const x = corner.x * Math.cos(rad) - corner.y * Math.sin(rad); + const y = corner.x * Math.sin(rad) + corner.y * Math.cos(rad); const threshold = 0.5; - return { - x: Math.abs(newX) > threshold ? (newX > 0 ? 1 : -1) : 0, - y: Math.abs(newY) > threshold ? (newY > 0 ? 1 : -1) : 0 - }; - } - + return { x: Math.abs(x) > threshold ? (x > 0 ? 1 : -1) : 0, y: Math.abs(y) > threshold ? (y > 0 ? 1 : -1) : 0 }; + }; if (rotation !== 0) { - direction = getAdjustedCorner({x: direction[0], y: direction[1]}, rotation); + direction = getAdjustedCorner({ x: direction[0], y: direction[1] }, rotation); direction = [direction.x, direction.y]; } - - // 判断是否是对角线方向（需要等比缩放） + const isDiagonal = Math.abs(direction[0]) === 1 && Math.abs(direction[1]) === 1; - - // 处理轴缩放，包含镜像翻转逻辑 - const processAxis = (axis, val, deltaVal, dir, originalPosition, originalSize, keepRatio = false, otherAxisResult = null) => { - let newVal = val * deltaVal; + + const processAxis = (axis, val, deltaVal, dir, pos, keepRatio = false, otherAxisResult = null) => { const mirrorKey = axis === 'width' ? 'x' : 'y'; const isWidth = axis === 'width'; - - // 检查是否需要镜像翻转（当值小于等于0时） + + let newVal = val * deltaVal; + + // 翻转处理 if (newVal <= 0) { frontStyle.mirror[mirrorKey] = !frontStyle.mirror[mirrorKey]; newVal = Math.abs(newVal); - updateElementTransform(frontStyle); - - // 镜像翻转后，位置需要根据原始锚点调整 - if (dir === -1) { - // 从左上/右上缩放时，位置保持不变 - return { - newVal, - adjustPos: originalPosition, - shouldFlip: true - }; - } else { - // 从左下/右下缩放时，位置需要调整 - const newPosition = originalPosition + (originalSize - newVal) * (frontStyle.mirror[mirrorKey] ? -1 : 1); - return { - newVal, - adjustPos: newPosition, - shouldFlip: true - }; - } } - const shouldMove = (!frontStyle.mirror[mirrorKey] && dir === -1) || - (frontStyle.mirror[mirrorKey] && dir === 1); + + // 位置调整 + const shouldMove = (!frontStyle.mirror[mirrorKey] && dir === -1) || (frontStyle.mirror[mirrorKey] && dir === 1); + if (keepRatio && otherAxisResult) { - newVal = isWidth ? - otherAxisResult.newVal * originalRatio : - otherAxisResult.newVal / originalRatio; + newVal = isWidth ? otherAxisResult.newVal * originalRatio : otherAxisResult.newVal / originalRatio; } - let adjustPos; - if (shouldMove) { - adjustPos = originalPosition - (newVal - originalSize); - } else { - adjustPos = originalPosition; - } - return { - newVal, - adjustPos, - shouldFlip: false - }; + + const adjustPos = shouldMove ? pos - (newVal - val) : pos; + + return { newVal, adjustPos, shouldFlip: newVal !== val && newVal <= 0 }; }; - // 自由缩放 - const widthResult = processAxis('width', width, delta[0], direction[0], left, width); - const heightResult = processAxis('height', height, delta[1], direction[1], top, height); - + if (isDiagonal) { + const mainAxis = Math.abs(delta[0] - 1) > Math.abs(delta[1] - 1) ? 'width' : 'height'; + const crossAxis = mainAxis === 'width' ? 'height' : 'width'; + + const mainDir = mainAxis === 'width' ? direction[0] : direction[1]; + const crossDir = crossAxis === 'width' ? direction[0] : direction[1]; + + const mainDelta = mainAxis === 'width' ? delta[0] : delta[1]; + + const mainResult = processAxis(mainAxis, mainAxis === 'width' ? width : height, mainDelta, mainDir, mainAxis === 'width' ? left : top); + const crossResult = processAxis(crossAxis, crossAxis === 'width' ? width : height, 1, crossDir, crossAxis === 'width' ? left : top, true, mainResult); + + frontStyle.style.width = mainAxis === 'width' ? mainResult.newVal + 'px' : crossResult.newVal + 'px'; + frontStyle.style.height = mainAxis === 'height' ? mainResult.newVal + 'px' : crossResult.newVal + 'px'; + frontStyle.style.left = mainAxis === 'width' ? mainResult.adjustPos + 'px' : crossResult.adjustPos + 'px'; + frontStyle.style.top = mainAxis === 'height' ? mainResult.adjustPos + 'px' : crossResult.adjustPos + 'px'; + } else { + const widthResult = processAxis('width', width, delta[0], direction[0], left); + const heightResult = processAxis('height', height, delta[1], direction[1], top); + frontStyle.style.left = widthResult.adjustPos + 'px'; frontStyle.style.top = heightResult.adjustPos + 'px'; frontStyle.style.width = widthResult.newVal + 'px'; frontStyle.style.height = heightResult.newVal + 'px'; - // } + } }); + // 旋转 moveableInstance.value.on('rotate', ({ target, beforeRotate }) => { From a6b0a60eb6e393c1c9004849dc71a592e22a87b2 Mon Sep 17 00:00:00 2001 From: X1627315083 <1627315083@qq.com> Date: Mon, 26 Jan 2026 15:11:03 +0800 Subject: [PATCH 2/8] =?UTF-8?q?=E8=B0=83=E6=95=B4=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/Detail/model/modelPosition.vue | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/component/Detail/model/modelPosition.vue b/src/component/Detail/model/modelPosition.vue index c688235f..a5c7de2c 100644 --- a/src/component/Detail/model/modelPosition.vue +++ b/src/component/Detail/model/modelPosition.vue @@ -623,7 +623,15 @@ export default defineComponent({ opacity: 0; } :deep(.moveable-control){ + width: 1.4rem; + height: 1.4rem; border-radius: 0; + background-color: #44aaff; + border: 2px solid #44aaff; + &.moveable-ne,&.moveable-se,&.moveable-sw,&.moveable-nw{ + border: 2px solid #44aaff; + background-color: #ffff; + } } :deep(.moveable-rotation-control){ border-radius: 50%; From 9cecbdcf9b3f87d31e65eb99beec186d2a4f951f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com> Date: Mon, 26 Jan 2026 16:16:40 +0800 Subject: [PATCH 3/8] =?UTF-8?q?=E9=83=A8=E4=BB=B6=E9=80=89=E5=8F=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../FillGroupLayerBackgroundCommand.js | 5 +- .../commands/LassoCutoutCommand.js | 12 +- .../CanvasEditor/commands/PartCommands.js | 26 ++ .../components/PartSelectorPanel.vue | 58 +--- src/component/Canvas/CanvasEditor/index.vue | 2 + .../CanvasEditor/managers/CanvasManager.js | 6 +- .../CanvasEditor/managers/PartManager.js | 262 +++++++++++++----- .../CanvasEditor/managers/ToolManager.js | 4 +- .../Canvas/CanvasEditor/utils/helper.js | 1 + src/component/Canvas/canvasExample.vue | 11 +- src/component/Canvas/test.vue | 2 +- 11 files changed, 245 insertions(+), 144 deletions(-) create mode 100644 src/component/Canvas/CanvasEditor/commands/PartCommands.js diff --git a/src/component/Canvas/CanvasEditor/commands/FillGroupLayerBackgroundCommand.js b/src/component/Canvas/CanvasEditor/commands/FillGroupLayerBackgroundCommand.js index edd061ac..26f90e2c 100644 --- a/src/component/Canvas/CanvasEditor/commands/FillGroupLayerBackgroundCommand.js +++ b/src/component/Canvas/CanvasEditor/commands/FillGroupLayerBackgroundCommand.js @@ -106,7 +106,6 @@ export class FillGroupLayerBackgroundCommand extends Command { }); } } - // 判断fabricObjects是否是组对象 const firstObj = layer.fabricObjects?.[0] || null; // 如果没有找到第一个对象，则直接添加到当前画布 @@ -173,8 +172,8 @@ export class FillGroupLayerBackgroundCommand extends Command { } const canvasObj = findObjectById(this.canvas, firstObj?.id)?.object; if ( - (canvasObj && canvasObj.type === "group") || - canvasObj._objects?.length > 0 + canvasObj && (canvasObj.type === "group" || + canvasObj._objects?.length > 0) ) { this.newFill.set({ left: 0, diff --git a/src/component/Canvas/CanvasEditor/commands/LassoCutoutCommand.js b/src/component/Canvas/CanvasEditor/commands/LassoCutoutCommand.js index a3ad1eaf..b69f2cdc 100644 --- a/src/component/Canvas/CanvasEditor/commands/LassoCutoutCommand.js +++ b/src/component/Canvas/CanvasEditor/commands/LassoCutoutCommand.js @@ -147,11 +147,11 @@ export class LassoCutoutCommand extends CompositeCommand { } // 确定源图层 - const sourceLayer = this.layerManager.getActiveLayer(); - if (!sourceLayer) { - console.error("无法执行套索抠图：源图层无效"); - return false; - } + // const sourceLayer = this.layerManager.getActiveLayer(); + // if (!sourceLayer) { + // console.error("无法执行套索抠图：源图层无效"); + // return false; + // } // 获取源图层的所有对象（包括子图层） // const sourceObjects = this._getLayerObjects(sourceLayer); @@ -225,7 +225,7 @@ export class LassoCutoutCommand extends CompositeCommand { const layers = this.layerManager.layers.value; var topLayerIndex = 0; - layers.forEach((layer, index) => { + if(this.originalLayer)layers.forEach((layer, index) => { if (layer.id === this.originalLayer.id) { topLayerIndex = index; }else if (layer.children.length > 0) { diff --git a/src/component/Canvas/CanvasEditor/commands/PartCommands.js b/src/component/Canvas/CanvasEditor/commands/PartCommands.js new file mode 100644 index 00000000..b9831a04 --- /dev/null +++ b/src/component/Canvas/CanvasEditor/commands/PartCommands.js @@ -0,0 +1,26 @@ +import { Command } from "./Command.js"; + +/** + * 部件绘制命令 + */ +export class PartDrawCommand extends Command { + constructor(options) { + super({ + name: "部件绘制命令", + saveState: false, + }); + + this.canvas = options.canvas; + this.partManager = options.partManager; + this.partCanvas = options.partCanvas; + this.oldPartCanvas = this.partManager.partCanvas; + } + execute() { + this.partManager.drawPartCanvas(this.partCanvas); + return true; + } + undo() { + this.partManager.drawPartCanvas(this.oldPartCanvas); + return true; + } +} diff --git a/src/component/Canvas/CanvasEditor/components/PartSelectorPanel.vue b/src/component/Canvas/CanvasEditor/components/PartSelectorPanel.vue index 658d647f..e947e730 100644 --- a/src/component/Canvas/CanvasEditor/components/PartSelectorPanel.vue +++ b/src/component/Canvas/CanvasEditor/components/PartSelectorPanel.vue @@ -57,12 +57,12 @@ $t("Canvas.creation") }} -
+
清空当前点位 @@ -76,23 +76,7 @@