@@ -180,9 +181,10 @@
import { Modal, message, Input } from 'ant-design-vue'
import { ExclamationCircleOutlined, MoreOutlined } from '@ant-design/icons-vue'
import allUserPoerationsVue from './addAllUser.vue'
- import { useI18n } from 'vue-i18n'
+ import { useI18n } from 'vue-i18n'
+ import SelectUser from '@/component/common/SelectUser.vue'
export default defineComponent({
- components: { allUserPoerationsVue, MoreOutlined },
+ components: { allUserPoerationsVue, MoreOutlined, SelectUser },
setup() {
const store: any = useStore()
const currentOrganizationId = computed(
diff --git a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue
index a52d393b..6f8a54a4 100644
--- a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue
+++ b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue
@@ -764,7 +764,7 @@
}
.tool-content {
- overflow-y: auto;
+ // overflow-y: auto;
max-height: 20rem;
margin-top: 1rem;
padding: 0 1.5rem;
diff --git a/src/component/Canvas/CanvasEditor/index.vue b/src/component/Canvas/CanvasEditor/index.vue
index 30ab3427..a80624c7 100644
--- a/src/component/Canvas/CanvasEditor/index.vue
+++ b/src/component/Canvas/CanvasEditor/index.vue
@@ -93,7 +93,7 @@ const props = defineProps({
},
clothingMinIOPath: {
type: String,
- default: "", // 衣服底图URL-线稿
+ default: "", // 衣服底图URL-线稿miniIo地址（传入后启动部件选取功能）
},
clothingImageUrl: {
type: String,
@@ -744,12 +744,12 @@ function deleteFun(e, control) {
if(target.onDelete){
target.onDelete(target);
}else if(target.id){
- removeLayer(layerManager.activeLayerId.value);
+ removeLayer(layerManager?.activeLayerId?.value);
}
}
function removeLayer(layerId) {
- layerManager.removeLayer(layerId);
+ if(layerId)layerManager.removeLayer(layerId);
}
function triggerImageUpload() {
diff --git a/src/component/Canvas/CanvasEditor/managers/PartManager.js b/src/component/Canvas/CanvasEditor/managers/PartManager.js
index 66569b5b..3f68adcc 100644
--- a/src/component/Canvas/CanvasEditor/managers/PartManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/PartManager.js
@@ -307,7 +307,12 @@ export class PartManager {
for (let i = 0; i < list.length; i++) {
const item = list[i];
const icon = await this.loadImageToObject(item.label === 1 ? addIcon : removeIcon);
+ let size = 20;
+ let scaleX = size / (icon.width * this.partGroup.scaleX);
+ let scaleY = size / (icon.height * this.partGroup.scaleY);
icon.set({
+ scaleX: scaleX,
+ scaleY: scaleY,
left: item.x - this.partGroup.width / 2,
top: item.y - this.partGroup.height / 2,
originX: fixedObject.originX,
@@ -315,6 +320,7 @@ export class PartManager {
})
this.partGroup.add(icon);
}
+ console.log(this.partGroup);
this.canvas.renderAll();
return true;
}
diff --git a/src/component/Detail/canvas/index.vue b/src/component/Detail/canvas/index.vue
index 17c08a9d..ac0c3544 100644
--- a/src/component/Detail/canvas/index.vue
+++ b/src/component/Detail/canvas/index.vue
@@ -6,13 +6,13 @@
-
![]()
diff --git a/src/component/Detail/model/modelPosition.vue b/src/component/Detail/model/modelPosition.vue
index 8ba34db3..a5c7de2c 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 }) => {
@@ -647,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%;
diff --git a/src/component/common/SelectImages.vue b/src/component/common/SelectImages.vue
index 5efdb5c9..04382229 100644
--- a/src/component/common/SelectImages.vue
+++ b/src/component/common/SelectImages.vue
@@ -20,7 +20,7 @@
-