Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite
This commit is contained in:
@@ -1,68 +1,29 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="103.000000pt" height="92.000000pt" viewBox="0 0 103.000000 92.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 184.06 163.52">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1, .cls-2 {
|
||||
fill: #333;
|
||||
}
|
||||
|
||||
<g transform="translate(0.000000,92.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M365 895 c-5 -2 -36 -6 -67 -10 -45 -5 -58 -10 -59 -23 0 -11 -2 -12
|
||||
-6 -4 -7 17 -32 15 -40 -4 -4 -11 -8 -12 -13 -4 -5 8 -13 9 -21 4 -7 -4 -22
|
||||
-9 -34 -10 -11 -1 -41 -11 -66 -21 l-47 -18 20 -63 c11 -38 23 -60 30 -56 6 4
|
||||
8 -1 3 -15 -3 -11 -3 -21 2 -21 4 0 9 -12 9 -26 1 -14 5 -28 8 -32 4 -3 33 3
|
||||
66 15 33 11 61 19 62 18 2 -2 1 -139 -2 -304 l-5 -301 309 2 309 3 -2 108 c-2
|
||||
77 2 113 11 125 10 12 10 14 1 8 -7 -4 -13 -2 -13 4 0 6 10 8 23 5 18 -5 26
|
||||
-1 36 17 9 17 10 18 6 3 -5 -16 -4 -18 6 -7 18 17 -1 34 -40 37 l-32 2 -2 151
|
||||
c-1 82 0 147 3 144 9 -12 44 -11 52 1 5 8 8 7 8 -4 0 -14 26 -28 52 -29 11 0
|
||||
39 70 33 80 -3 5 1 11 7 13 10 4 9 8 -2 16 -13 10 -8 15 12 12 8 -1 38 91 32
|
||||
98 -2 2 -10 -2 -18 -8 -9 -7 -17 -8 -20 -2 -3 5 0 11 6 14 7 2 -18 14 -56 26
|
||||
-38 12 -71 19 -74 16 -3 -3 -11 0 -18 6 -8 6 -20 9 -28 6 -8 -3 -16 -2 -18 3
|
||||
-5 15 -154 30 -286 29 -70 0 -131 -2 -137 -4z m21 -30 c-6 -18 3 -47 14 -40 4
|
||||
2 18 -7 30 -20 27 -29 17 -34 -14 -7 -20 16 -20 16 -7 -1 23 -29 66 -47 112
|
||||
-47 34 0 40 3 35 16 -5 14 -4 15 9 4 13 -11 19 -9 36 6 12 11 29 35 38 54 15
|
||||
31 20 35 58 35 24 0 43 -2 43 -5 0 -11 115 -27 121 -18 3 5 9 2 13 -7 4 -13
|
||||
14 -16 34 -12 15 2 36 1 47 -4 16 -7 14 -8 -10 -5 l-30 5 32 -14 c39 -18 39
|
||||
-19 14 -83 -15 -38 -17 -52 -8 -61 9 -9 8 -11 -7 -5 -16 6 -18 4 -12 -19 3
|
||||
-14 2 -29 -4 -32 -6 -3 -7 1 -4 9 6 16 -9 20 -73 19 -12 0 -20 4 -17 8 3 5 -4
|
||||
9 -15 9 -20 0 -21 -5 -21 -151 l0 -151 -27 8 c-16 4 -38 7 -50 7 -19 -1 -21 2
|
||||
-13 17 15 28 12 57 -6 57 -11 0 -15 -8 -12 -27 4 -24 1 -27 -23 -26 -15 1 -25
|
||||
4 -22 9 2 4 -2 7 -10 7 -9 0 -14 -10 -14 -25 0 -13 3 -22 8 -19 5 3 6 -1 3 -9
|
||||
-2 -7 0 -25 5 -40 8 -20 7 -25 -3 -21 -7 3 -13 -2 -13 -11 0 -12 7 -15 26 -11
|
||||
14 3 21 3 14 0 -7 -3 -9 -12 -6 -20 3 -7 10 -11 16 -7 5 3 7 1 4 -4 -9 -14 3
|
||||
-74 12 -68 4 2 7 -6 7 -18 -1 -32 32 -34 44 -3 5 14 7 34 5 46 -3 13 0 18 7
|
||||
14 8 -5 9 -1 5 10 -4 9 -3 15 2 12 5 -3 12 1 15 10 3 8 2 12 -4 9 -6 -3 -10
|
||||
-1 -10 4 0 13 3 13 24 5 13 -5 16 -24 16 -103 0 -63 4 -102 13 -111 10 -12 9
|
||||
-12 -4 -2 -13 10 -88 12 -300 10 l-284 -3 3 303 3 302 -26 0 c-14 0 -25 -4
|
||||
-25 -10 0 -5 -7 -6 -17 -3 -9 4 -14 2 -10 -3 4 -6 -6 -9 -24 -6 -28 4 -41 -11
|
||||
-19 -21 6 -3 5 -4 -2 -3 -7 2 -13 11 -13 22 -1 32 -25 104 -35 104 -5 0 -6 7
|
||||
-3 17 4 10 2 14 -5 9 -7 -4 -10 2 -8 17 3 29 14 47 29 47 7 0 3 -8 -8 -17
|
||||
l-20 -16 20 8 c11 4 28 10 37 12 10 3 18 9 18 13 0 4 6 7 12 7 22 -2 158 26
|
||||
158 32 0 3 20 6 45 5 25 0 45 3 45 8 0 4 3 8 6 8 3 0 4 -7 0 -15z m237 -5 c-3
|
||||
-9 1 -8 11 4 9 11 16 15 16 9 0 -6 -7 -16 -15 -23 -8 -7 -15 -9 -15 -4 0 10
|
||||
-29 -28 -30 -40 0 -4 8 -5 17 -2 15 6 15 4 -2 -14 -22 -24 -37 -26 -28 -4 5
|
||||
14 3 15 -15 5 -26 -14 -77 -14 -103 -1 -10 6 -27 27 -38 48 l-19 37 113 0 c95
|
||||
0 112 -2 108 -15z"/>
|
||||
<path d="M346 641 c-3 -5 1 -12 10 -15 23 -9 36 -7 29 4 -3 6 1 7 9 4 9 -3 16
|
||||
-1 16 5 0 13 -56 15 -64 2z"/>
|
||||
<path d="M440 640 c0 -16 33 -26 38 -12 2 7 8 10 13 6 5 -3 9 0 9 5 0 6 -13
|
||||
11 -30 11 -16 0 -30 -5 -30 -10z"/>
|
||||
<path d="M530 641 c0 -12 37 -24 50 -16 20 12 10 25 -20 25 -16 0 -30 -4 -30
|
||||
-9z"/>
|
||||
<path d="M620 641 c0 -12 37 -24 50 -16 20 12 10 25 -20 25 -16 0 -30 -4 -30
|
||||
-9z"/>
|
||||
<path d="M310 593 c0 -20 5 -30 16 -30 10 0 14 8 12 25 -4 37 -28 40 -28 5z"/>
|
||||
<path d="M697 613 c-13 -13 -7 -50 8 -50 10 0 15 10 15 29 0 27 -9 35 -23 21z"/>
|
||||
<path d="M317 534 c-4 -4 -7 -20 -7 -36 0 -35 23 -34 28 1 4 25 -10 46 -21 35z"/>
|
||||
<path d="M692 503 c4 -39 28 -42 28 -4 0 21 -5 31 -16 31 -11 0 -14 -8 -12
|
||||
-27z"/>
|
||||
<path d="M312 415 c4 -33 22 -33 26 0 2 18 -1 25 -13 25 -12 0 -15 -7 -13 -25z"/>
|
||||
<path d="M312 329 c2 -19 8 -33 13 -31 15 3 12 55 -3 60 -10 3 -13 -5 -10 -29z"/>
|
||||
<path d="M342 278 c3 -7 19 -14 37 -16 24 -3 32 0 29 10 -3 7 -19 14 -37 16
|
||||
-24 3 -32 0 -29 -10z"/>
|
||||
<path d="M443 275 c0 -10 10 -15 29 -15 18 0 28 5 28 15 0 10 -10 15 -28 15
|
||||
-19 0 -29 -5 -29 -15z"/>
|
||||
<path d="M530 275 c0 -10 10 -15 33 -15 22 0 28 3 18 9 -11 7 -11 9 0 14 8 3
|
||||
-1 6 -18 6 -23 1 -33 -4 -33 -14z"/>
|
||||
</g>
|
||||
</svg>
|
||||
.cls-2 {
|
||||
stroke: #333;
|
||||
stroke-miterlimit: 10;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path class="cls-2" d="M35.53,54.52c-.76-.96-.84-1.16-2.06-1.12-4.02.13-16.7,6.5-19.81,4.48C12.45,52.21-1.21,21.14.68,18.17c56.98-23.47,125.74-23.63,182.7,0,1.88,2.98-11.77,34.04-12.98,39.72-3.11,2.01-15.78-4.36-19.81-4.48-1.23-.04-1.3.16-2.06,1.12v48c2.87,3.81,14.6,2.98,14.05,8.95-1.06,5.75-12.53,3.84-13.85,8.24l.34,39.85c.08.98-1.55,3.46-2.04,3.46H37.03c-2.08,0-1.5-3.59-1.5-4.5V54.52ZM41.53,47.52v108.5h101v-36c-7.66,1.58-6.82,23.41-12.7,24.86-1.18.17-2.67-.14-3.63-.79-2.98-2.02-6.47-24.26-10.3-25.81-.94-.38-4.46.95-5.31-1.9-1.01-3.4,3.85-4,4.01-5.02-.12-4.15-6.85-15.14-3.84-18.1,4.45-3.04,8.95,1.93,13.76,1.74-1.35-3.15-2.75-11.61,2.46-11.03s3.05,9.89,1.55,13.02l14,4.01v-53.5c0-5.17,22.25,4.69,23.94,3.46,1.7-8.98,7.54-18.42,9.64-26.94.32-1.3.79-1.48-.58-2.5-2.81-2.08-21.4-6.93-25.98-8.02-10.05-2.4-20.36-3.72-30.52-5.53-2.44.17-3.98,7.98-6.05,10.97-13.1,18.91-41.58,12.05-45.92-9.95l-2-1.02c-19.44,3.3-39.69,6.08-57.48,14.6l10.03,28.4c4.22.52,22.41-8.34,23.94-3.46ZM110.53,8.02h-37c4,20.53,33,20.53,37,0Z"/>
|
||||
<path class="cls-1" d="M89.27,117.8c-.94.96-10.2,1.42-11.25-.78-4.1-8.61,17.67-5.76,11.25.78Z"/>
|
||||
<path class="cls-1" d="M94.79,117.8c-6.42-6.54,15.35-9.39,11.25-.78-1.05,2.19-10.31,1.74-11.25.78Z"/>
|
||||
<path class="cls-1" d="M60.62,113.11c1.1-1.64,14.59-2.57,12.84,3.27-1.14,3.81-16.87,2.76-12.84-3.27Z"/>
|
||||
<path class="cls-1" d="M62.18,46.17h9.69s1.53,3.19,1.53,3.19c-1.22,4.73-18.53,3.97-11.22-3.19Z"/>
|
||||
<path class="cls-1" d="M112.19,46.18l10.91.77.34,3.47c-.87,2.65-12.93,2.92-12.96-1.9l1.7-2.34Z"/>
|
||||
<path class="cls-1" d="M56.23,84.18c6.63-1.86,6.45,14.76-.7,11.35-2.24-1.07-2.61-10.42.7-11.35Z"/>
|
||||
<path class="cls-1" d="M89.37,46.16l.96,3.22c-.81,4.5-16.92,3.98-12.37-2.43l11.42-.79Z"/>
|
||||
<path class="cls-1" d="M94.68,46.16l11.42.79.34,3.47c-1.03,3.13-16.69,2.9-11.76-4.26Z"/>
|
||||
<path class="cls-1" d="M54.75,63.76c-1.01-.99-2.01-12.94,3.11-11.63,5.4,1.38,2.78,17.42-3.11,11.63Z"/>
|
||||
<path class="cls-1" d="M129.31,63.76c-5.88,5.78-8.51-10.25-3.11-11.63,5.12-1.31,4.12,10.64,3.11,11.63Z"/>
|
||||
<path class="cls-1" d="M59.44,68.12c1.19.8,3.28,13.19-3.02,12.43l-2.23-1.77c-.57-2.83-.34-14.39,5.25-10.66Z"/>
|
||||
<path class="cls-1" d="M59.44,111.92c-5.59,3.73-5.82-7.83-5.25-10.66l2.23-1.77c6.3-.76,4.22,11.63,3.02,12.43Z"/>
|
||||
<path class="cls-1" d="M129.32,79.79c-5.12,5.18-7.81-7.81-4.7-11.67l3.28.02,1.48,1.52c-.35,2.45,1.51,8.54-.07,10.13Z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 2.6 KiB |
@@ -50,7 +50,6 @@ export class FillGroupLayerBackgroundCommand extends Command {
|
||||
);
|
||||
this.layer = layer;
|
||||
this.parent = parent;
|
||||
console.log("==========",layer);
|
||||
if (!layer) return false;
|
||||
|
||||
if(!isUndo){
|
||||
@@ -343,10 +342,6 @@ export class FillGroupLayerBackgroundCommand extends Command {
|
||||
minTop = Infinity,
|
||||
maxRight = -Infinity,
|
||||
maxBottom = -Infinity;
|
||||
console.log(
|
||||
"计算当前所有对象的边界信息:===>",
|
||||
this.originalfabricObjects.length
|
||||
);
|
||||
this.originalfabricObjects?.forEach((obj) => {
|
||||
const { object } = findObjectById(this.canvas, obj.id) || {};
|
||||
if (object) {
|
||||
|
||||
@@ -110,13 +110,15 @@ export class FillRepeatCommand extends Command {
|
||||
height: object.height,
|
||||
}
|
||||
};
|
||||
const fdObject = this.canvasManager.getFixedLayerObject();
|
||||
const bgObject = this.canvasManager.getBackgroundLayerObject();
|
||||
const tObject = fdObject || bgObject;
|
||||
const pattern = new fabric.Pattern({
|
||||
source: img,
|
||||
repeat: this.fillRepeat,
|
||||
patternTransform: object.fill?.hasOwnProperty("patternTransform") ? object.fill.patternTransform : createPatternTransform(scale, 0),
|
||||
offsetX: object.fill?.hasOwnProperty("offsetX") ? object.fill.offsetX : bgObject.width / 2, // 水平偏移
|
||||
offsetY: object.fill?.hasOwnProperty("offsetY") ? object.fill.offsetY : bgObject.height / 2, // 垂直偏移
|
||||
offsetX: object.fill?.hasOwnProperty("offsetX") ? object.fill.offsetX : tObject.width / 2, // 水平偏移
|
||||
offsetY: object.fill?.hasOwnProperty("offsetY") ? object.fill.offsetY : tObject.height / 2, // 垂直偏移
|
||||
});
|
||||
const rect = new fabric.Rect({
|
||||
id: object.id,
|
||||
@@ -143,13 +145,13 @@ export class FillRepeatCommand extends Command {
|
||||
flipY: object.flipY,
|
||||
});
|
||||
} else {
|
||||
let scaleX = bgObject.scaleX || 1;
|
||||
let scaleY = bgObject.scaleY || 1;
|
||||
let scaleX = tObject.scaleX || 1;
|
||||
let scaleY = tObject.scaleY || 1;
|
||||
rect.set({
|
||||
width: bgObject.width,
|
||||
height: bgObject.height,
|
||||
top: bgObject.top - bgObject.height * scaleY / 2,
|
||||
left: bgObject.left - bgObject.width * scaleX / 2,
|
||||
width: tObject.width,
|
||||
height: tObject.height,
|
||||
top: tObject.top - tObject.height * scaleY / 2,
|
||||
left: tObject.left - tObject.width * scaleX / 2,
|
||||
scaleX,
|
||||
scaleY,
|
||||
});
|
||||
@@ -305,6 +307,7 @@ export class FillRepeatGapChangeCommand extends Command {
|
||||
object.fill_.gapY = this.newGapY;
|
||||
}
|
||||
const image = new Image();
|
||||
image.crossOrigin = "anonymous";
|
||||
image.src = object.fill_.source;
|
||||
await image.decode();
|
||||
object.fill_.width = image.width;
|
||||
|
||||
@@ -3684,7 +3684,7 @@ export class ChangeFixedImageCommand extends Command {
|
||||
opacity: currentObj.opacity,
|
||||
};
|
||||
|
||||
console.log(`保存渲染顺序: z-index = ${this.previousZIndex}`);
|
||||
// console.log(`保存渲染顺序: z-index = ${this.previousZIndex}`);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3794,7 +3794,7 @@ export class ChangeFixedImageCommand extends Command {
|
||||
false
|
||||
);
|
||||
if (insertSuccess) {
|
||||
console.log(`新图像插入到z-index位置: ${this.previousZIndex}`);
|
||||
// console.log(`新图像插入到z-index位置: ${this.previousZIndex}`);
|
||||
} else {
|
||||
// 如果插入失败，回退到普通添加
|
||||
this.canvas.add(newImage);
|
||||
|
||||
@@ -600,7 +600,7 @@ export class ChangeFixedImageCommand extends Command {
|
||||
opacity: currentObj.opacity,
|
||||
};
|
||||
|
||||
console.log(`保存渲染顺序: z-index = ${this.previousZIndex}`);
|
||||
// console.log(`保存渲染顺序: z-index = ${this.previousZIndex}`);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -716,7 +716,7 @@ export class ChangeFixedImageCommand extends Command {
|
||||
false
|
||||
);
|
||||
if (insertSuccess) {
|
||||
console.log(`新图像插入到z-index位置: ${this.previousZIndex}`);
|
||||
// console.log(`新图像插入到z-index位置: ${this.previousZIndex}`);
|
||||
} else {
|
||||
// 如果插入失败，回退到普通添加
|
||||
this.canvas.add(newImage);
|
||||
|
||||
@@ -285,17 +285,15 @@ export class RasterizeLayerCommand extends Command {
|
||||
// 提取排序后的对象
|
||||
this.objectsToRasterize = objectsWithZIndex.map((item) => item.object);
|
||||
|
||||
console.log(
|
||||
`📊 收集到 ${this.layersToRasterize.length} 个图层，${this.objectsToRasterize.length} 个对象进行组合`
|
||||
);
|
||||
console.log(
|
||||
"🔢 对象z-index顺序:",
|
||||
objectsWithZIndex.map((item) => ({
|
||||
id: item.object.id,
|
||||
type: item.object.type,
|
||||
zIndex: item.zIndex,
|
||||
}))
|
||||
);
|
||||
// console.log(`📊 收集到 ${this.layersToRasterize.length} 个图层，${this.objectsToRasterize.length} 个对象进行组合` );
|
||||
// console.log(
|
||||
// "🔢 对象z-index顺序:",
|
||||
// objectsWithZIndex.map((item) => ({
|
||||
// id: item.object.id,
|
||||
// type: item.object.type,
|
||||
// zIndex: item.zIndex,
|
||||
// }))
|
||||
// );
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -611,17 +609,17 @@ export class ExportLayerToImageCommand extends Command {
|
||||
// 提取排序后的对象
|
||||
this.objectsToRasterize = objectsWithZIndex.map((item) => item.object);
|
||||
|
||||
console.log(
|
||||
`📊 收集到 ${this.layersToRasterize.length} 个图层，${this.objectsToRasterize.length} 个对象进行组合`
|
||||
);
|
||||
console.log(
|
||||
"🔢 对象z-index顺序:",
|
||||
objectsWithZIndex.map((item) => ({
|
||||
id: item.object.id,
|
||||
type: item.object.type,
|
||||
zIndex: item.zIndex,
|
||||
}))
|
||||
);
|
||||
// console.log(
|
||||
// `📊 收集到 ${this.layersToRasterize.length} 个图层，${this.objectsToRasterize.length} 个对象进行组合`
|
||||
// );
|
||||
// console.log(
|
||||
// "🔢 对象z-index顺序:",
|
||||
// objectsWithZIndex.map((item) => ({
|
||||
// id: item.object.id,
|
||||
// type: item.object.type,
|
||||
// zIndex: item.zIndex,
|
||||
// }))
|
||||
// );
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -125,6 +125,7 @@
|
||||
"
|
||||
:options="selectOptions"
|
||||
@change="(e) => changeFillRepeat(e, v)"
|
||||
:disabled="v.layer?.metadata?.level2Type === 'Embroidery'"
|
||||
/>
|
||||
</div>
|
||||
<!-- 平铺设置 -->
|
||||
|
||||
@@ -34,7 +34,6 @@ const props = defineProps({
|
||||
default: "", // 衣服底图URL-线稿
|
||||
},
|
||||
});
|
||||
console.log(props.clothingMinIOPath)
|
||||
const commandManager = inject("commandManager");
|
||||
const layerManager = inject("layerManager"); // 图层管理器
|
||||
|
||||
|
||||
@@ -71,10 +71,6 @@ const props = defineProps({
|
||||
type: [Object, String],
|
||||
default: "", // 默认空
|
||||
},
|
||||
otherData: {
|
||||
type: [Object, null],
|
||||
default: null, // 默认空对象
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => CanvasConfig, // 默认配置
|
||||
@@ -472,13 +468,6 @@ onMounted(async () => {
|
||||
canvasManager.canvas.width,
|
||||
canvasManager.canvas.height
|
||||
);
|
||||
|
||||
if(props.otherData && !props.otherData.canvasId) {
|
||||
await canvasManager?.createOtherLayers(props.otherData);
|
||||
await layerManager?.layerSort?.rearrangeObjects();
|
||||
}
|
||||
emit("canvas-load-json-success");
|
||||
|
||||
}
|
||||
|
||||
// // 设置固定图层是否可擦除
|
||||
@@ -502,10 +491,11 @@ onMounted(async () => {
|
||||
nextTick(() => {
|
||||
// 确保所有依赖都已加载完成
|
||||
handleCanvasInit();
|
||||
emit("canvas-load-json-success");
|
||||
setTimeout(() => {
|
||||
// 初始状态下生成所有预览图
|
||||
canvasManager?.updateAllThumbnails?.();
|
||||
}, 700);
|
||||
}, 500);
|
||||
});
|
||||
|
||||
let trailingTimeout = null;
|
||||
|
||||
@@ -843,7 +843,6 @@ export class CanvasManager {
|
||||
updateMaskPosition(backgroundLayerObject) {
|
||||
if (!backgroundLayerObject || !this.maskLayer || !this.canvas.clipPath)
|
||||
return;
|
||||
console.log("backgroundLayerObject");
|
||||
const left = backgroundLayerObject.left;
|
||||
const top = backgroundLayerObject.top;
|
||||
|
||||
@@ -1187,7 +1186,8 @@ export class CanvasManager {
|
||||
obj.scale = [scaleXY, scaleXY];
|
||||
obj.angle = angle;
|
||||
obj.location = [left, top];
|
||||
obj.gap = [fill_.gapX, fill_.gapY];
|
||||
obj.object.gapX = fill_.gapX;
|
||||
obj.object.gapY = fill_.gapY;
|
||||
}
|
||||
if(obj.level2Type === "Pattern"){
|
||||
prints.push(obj);
|
||||
@@ -1293,7 +1293,6 @@ export class CanvasManager {
|
||||
}
|
||||
|
||||
loadJSON(json, calllBack) {
|
||||
console.log("加载画布JSON数据:", json);
|
||||
|
||||
// 确保传入的json是字符串格式
|
||||
if (typeof json === "object") {
|
||||
@@ -1304,6 +1303,7 @@ export class CanvasManager {
|
||||
// 解析JSON字符串
|
||||
try {
|
||||
const parsedJson = JSON.parse(json);
|
||||
console.log("加载画布JSON数据:", parsedJson);
|
||||
this.canvasWidth.value = parsedJson.canvasWidth || this.width;
|
||||
this.canvasHeight.value = parsedJson.canvasHeight || this.height;
|
||||
this.canvasColor.value = parsedJson.canvasColor || this.backgroundColor;
|
||||
@@ -1329,7 +1329,7 @@ export class CanvasManager {
|
||||
// this.canvasHeight.value = parsedJson.canvasHeight || this.height;
|
||||
// this.canvasColor.value = parsedJson.canvasColor || this.backgroundColor;
|
||||
|
||||
console.log("是否检测到红绿图模式内容:", this.enabledRedGreenMode);
|
||||
// console.log("是否检测到红绿图模式内容:", this.enabledRedGreenMode);
|
||||
|
||||
// 重置视图变换以确保元素位置正确
|
||||
this._resetViewportTransform(1);
|
||||
@@ -1341,7 +1341,7 @@ export class CanvasManager {
|
||||
|
||||
// 清除当前画布内容
|
||||
// this.canvas.clear(); // 清除画布内容 可以先去掉 这样加载闪动的情况就比较少 如果有问题 可以再打开
|
||||
console.log("清除当前画布内容", canvasData);
|
||||
// console.log("清除当前画布内容", canvasData);
|
||||
delete canvasData.clipPath; // 删除当前裁剪路径
|
||||
// 加载画布数据
|
||||
this.canvas.loadFromJSON(canvasData, async () => {
|
||||
@@ -1370,7 +1370,6 @@ export class CanvasManager {
|
||||
// 重置画布数据
|
||||
await this.setCanvasSize(this.canvas.width, this.canvas.height);
|
||||
await this.centerBackgroundLayer(this.canvas.width, this.canvas.height);
|
||||
await this.createOtherLayers(this.props.otherData);
|
||||
// 重新构建对象关系
|
||||
// restoreObjectLayerAssociations(this.layers.value, this.canvas.getObjects());
|
||||
// 验证图层关联关系 - 稳定后可以注释
|
||||
@@ -1400,7 +1399,6 @@ export class CanvasManager {
|
||||
await this.layerManager?.updateLayersObjectsInteractivity?.();
|
||||
|
||||
await calllBack?.();
|
||||
this.emit("canvas-load-json-success");
|
||||
// 更新所有缩略图
|
||||
setTimeout(() => {
|
||||
this.updateAllThumbnails();
|
||||
@@ -1458,7 +1456,7 @@ export class CanvasManager {
|
||||
|
||||
const printTrimsLayers = [];// 印花和元素图层
|
||||
const singleLayers = [];// 平铺图层
|
||||
otherData_.printObject?.prints?.forEach((print, index) => {
|
||||
otherData_.printObject?.prints?.forEach((print, index) => {// 印花
|
||||
print.name = t("Canvas.Print") + (index + 1);
|
||||
if(print.ifSingle){
|
||||
printTrimsLayers.unshift({...print});
|
||||
@@ -1466,7 +1464,7 @@ export class CanvasManager {
|
||||
singleLayers.unshift({...print});
|
||||
}
|
||||
})
|
||||
otherData_.trims?.prints?.forEach((trims, index) => {
|
||||
otherData_.trims?.prints?.forEach((trims, index) => {// 元素
|
||||
trims.name = t("Canvas.Elements") + (index + 1);
|
||||
printTrimsLayers.unshift({...trims});
|
||||
})
|
||||
@@ -1577,37 +1575,52 @@ export class CanvasManager {
|
||||
let name = item.name;
|
||||
let image = await new Promise(resolve => {
|
||||
fabric.Image.fromURL(item.path, (fabricImage)=>{
|
||||
const left = flLeft - flWidth * flScaleX / 2 + (item.location?.[0] || 0) * flScaleX
|
||||
const top = flTop - flHeight * flScaleY / 2 + (item.location?.[1] || 0) * flScaleY
|
||||
const scaleX = flWidth * (item.scale?.[0] || 1) / fabricImage.width * flScaleX
|
||||
const scaleY = flHeight * (item.scale?.[1] || 1) / fabricImage.height * flScaleY
|
||||
const {x, y} = calculateRotatedTopLeftDeg(
|
||||
fabricImage.width * scaleX,
|
||||
fabricImage.height * scaleY,
|
||||
left,
|
||||
top,
|
||||
0,
|
||||
item.angle || 0
|
||||
)
|
||||
const angle = item.angle || 0
|
||||
fabricImage.set({
|
||||
left: x,
|
||||
top: y,
|
||||
scaleX: scaleX,
|
||||
scaleY: scaleY,
|
||||
angle: angle,
|
||||
id: id,
|
||||
layerId: id,
|
||||
layerName: name,
|
||||
selectable: true,
|
||||
hasControls: true,
|
||||
hasBorders: true,
|
||||
isPrintTrims: true,
|
||||
globalCompositeOperation: BlendMode.MULTIPLY,
|
||||
});
|
||||
resolve(fabricImage);
|
||||
}, { crossOrigin: "anonymous" });
|
||||
})
|
||||
let left = flLeft - flWidth * flScaleX / 2 + (item.location?.[0] || 0) * flScaleX
|
||||
let top = flTop - flHeight * flScaleY / 2 + (item.location?.[1] || 0) * flScaleY
|
||||
let scaleX = flWidth * (item.scale?.[0] || 1) / image.width * flScaleX
|
||||
let scaleY = flHeight * (item.scale?.[1] || 1) / image.height * flScaleY
|
||||
let {x, y} = calculateRotatedTopLeftDeg(
|
||||
image.width * scaleX,
|
||||
image.height * scaleY,
|
||||
left,
|
||||
top,
|
||||
0,
|
||||
item.angle || 0
|
||||
)
|
||||
let angle = item.angle || 0
|
||||
|
||||
let opacity = 1
|
||||
let flipX = false;
|
||||
let flipY = false;
|
||||
let blendMode = BlendMode.MULTIPLY;
|
||||
if(item.level2Type === "Embroidery") blendMode = BlendMode.NORMAL;// 元素正常
|
||||
if(item.object){
|
||||
opacity = item.object.opacity
|
||||
flipX = item.object.flipX
|
||||
flipY = item.object.flipY
|
||||
if(item.object.blendMode) blendMode = item.object.blendMode;
|
||||
}
|
||||
image.set({
|
||||
left: x,
|
||||
top: y,
|
||||
scaleX: scaleX,
|
||||
scaleY: scaleY,
|
||||
angle: angle,
|
||||
opacity: opacity,
|
||||
flipX: flipX,
|
||||
flipY: flipY,
|
||||
globalCompositeOperation: blendMode,
|
||||
id: id,
|
||||
layerId: id,
|
||||
layerName: name,
|
||||
selectable: true,
|
||||
hasControls: true,
|
||||
hasBorders: true,
|
||||
isPrintTrims: true,
|
||||
});
|
||||
this.canvas.add(image);
|
||||
let layer = createLayer({
|
||||
id: id,
|
||||
@@ -1615,11 +1628,11 @@ export class CanvasManager {
|
||||
type: LayerType.BITMAP,
|
||||
visible: true,
|
||||
locked: false,
|
||||
opacity: 1.0,
|
||||
opacity: opacity,
|
||||
isPrintTrims: true,
|
||||
blendMode: BlendMode.MULTIPLY,
|
||||
blendMode: blendMode,
|
||||
fabricObjects: [image.toObject(["id", "layerId", "layerName"])],
|
||||
metadata: {sourceData: item},
|
||||
metadata: {sourceData: item, level2Type: item.level2Type},
|
||||
})
|
||||
children.push(layer);
|
||||
};
|
||||
|
||||
@@ -681,7 +681,7 @@ export class ExportManager {
|
||||
isEnhanceImg, // 是否是增强图片
|
||||
});
|
||||
|
||||
console.log("导出图片数据URL:", dataURL);
|
||||
// console.log("导出图片数据URL:", dataURL);
|
||||
return dataURL;
|
||||
|
||||
// // 创建与画布相同尺寸的临时画布
|
||||
|
||||
@@ -149,7 +149,7 @@ export class LayerManager {
|
||||
*/
|
||||
initCommandManager() {
|
||||
// 命令注册逻辑已移除，现在直接使用命令类实例化和执行
|
||||
console.log("CommandManager 已初始化，使用直接命令调用模式");
|
||||
// console.log("CommandManager 已初始化，使用直接命令调用模式");
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -161,7 +161,7 @@ export class LayerManager {
|
||||
this.layerSort = createLayerSort(this.canvas, this.layers, {
|
||||
commandManager: this.commandManager,
|
||||
});
|
||||
console.log("图层排序工具已初始化");
|
||||
// console.log("图层排序工具已初始化");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -180,7 +180,7 @@ export class LayerManager {
|
||||
// 更新所有对象的交互性
|
||||
this.updateLayersObjectsInteractivity();
|
||||
|
||||
console.log(`已切换到${mode}模式`);
|
||||
// console.log(`已切换到${mode}模式`);
|
||||
}
|
||||
|
||||
setToolManager(toolManager) {
|
||||
@@ -332,7 +332,7 @@ export class LayerManager {
|
||||
|
||||
// 私有方法：应用交互规则
|
||||
async _applyInteractionRules({ isMoveing }) {
|
||||
console.log("updateLayersObjectsInteractivity ===>", this.editorMode);
|
||||
// console.log("updateLayersObjectsInteractivity ===>", this.editorMode);
|
||||
const objects = this.canvas.getObjects();
|
||||
const editorMode = this.editorMode || CanvasConfig.defaultTool;
|
||||
const layers = this.layers?.value || [];
|
||||
@@ -975,7 +975,7 @@ export class LayerManager {
|
||||
return !layer.isFixed && !layer.isFixedOther && !layer.isBackground
|
||||
})
|
||||
// const normalLayers = this.layers.value.filter((l) => !l.isBackground && !l.isFixed && !l.isFixedOther);
|
||||
console.log("普通图层:", normalLayers)
|
||||
// console.log("普通图层:", normalLayers)
|
||||
if (isChild ? parentLength <= 1 : false) {//normalLayers.length <= 1
|
||||
console.warn("不能删除唯一的普通图层");
|
||||
message.warning(this.t("Canvas.cannotDeleteOnlyLayer"));
|
||||
@@ -1096,14 +1096,14 @@ export class LayerManager {
|
||||
if (this.commandManager) {
|
||||
const result = this.commandManager.execute(command);
|
||||
if (result) {
|
||||
console.log(`✅ 图层移动成功: ${direction}`);
|
||||
// console.log(`✅ 图层移动成功: ${direction}`);
|
||||
}
|
||||
return result;
|
||||
} else {
|
||||
const result = command.execute();
|
||||
if (result) {
|
||||
// 更新画布渲染顺序
|
||||
console.log(`✅ 图层移动成功: ${direction}`);
|
||||
// console.log(`✅ 图层移动成功: ${direction}`);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
@@ -1147,7 +1147,6 @@ export class LayerManager {
|
||||
|
||||
return acc;
|
||||
}, []);
|
||||
console.log("==========", allObjects)
|
||||
// if (layer.fill) {
|
||||
// // 如果图层有填充颜色，设置所有对象的填充颜色
|
||||
// const { object } = findObjectById(this.canvas, layer.fill.id);
|
||||
@@ -1845,7 +1844,7 @@ export class LayerManager {
|
||||
input.select();
|
||||
document.execCommand("copy");
|
||||
document.body.removeChild(input);
|
||||
console.log(`已复制图层：${layer.name}`);
|
||||
// console.log(`已复制图层：${layer.name}`);
|
||||
|
||||
return this.clipboardData;
|
||||
}
|
||||
@@ -1870,7 +1869,7 @@ export class LayerManager {
|
||||
|
||||
// 检查是否是唯一的普通图层
|
||||
const normalLayers = this.layers.value.filter((l) => !l.isBackground && !l.isFixed && !l.isFixedOther);
|
||||
console.log("普通图层:", normalLayers)
|
||||
// console.log("普通图层:", normalLayers)
|
||||
if (normalLayers.length <= 1) {
|
||||
console.warn("不能剪切唯一的普通图层");
|
||||
return null;
|
||||
@@ -1930,7 +1929,7 @@ export class LayerManager {
|
||||
// 更新对象交互性
|
||||
this.updateLayersObjectsInteractivity();
|
||||
|
||||
console.log(`已剪切图层：${layer.name}`);
|
||||
// console.log(`已剪切图层：${layer.name}`);
|
||||
|
||||
return this.clipboardData;
|
||||
}
|
||||
@@ -1944,7 +1943,7 @@ export class LayerManager {
|
||||
* @returns {string} 新创建的图层ID
|
||||
*/
|
||||
async pasteLayer(event) {
|
||||
console.log("剪贴板数据:", this.clipboardData,event);
|
||||
// console.log("剪贴板数据:", this.clipboardData,event);
|
||||
if (!this.clipboardData) {
|
||||
console.error("剪贴板中没有图层数据");
|
||||
return null;
|
||||
@@ -2099,7 +2098,7 @@ export class LayerManager {
|
||||
// 重新初始化基本图层
|
||||
this.initializeLayers();
|
||||
|
||||
console.log("已清空画布");
|
||||
// console.log("已清空画布");
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -2312,7 +2311,7 @@ export class LayerManager {
|
||||
});
|
||||
|
||||
if (emptyLayerIds.length > 0) {
|
||||
console.log(`已清理 ${emptyLayerIds.length} 个空图层`);
|
||||
// console.log(`已清理 ${emptyLayerIds.length} 个空图层`);
|
||||
}
|
||||
|
||||
return emptyLayerIds;
|
||||
@@ -2344,7 +2343,7 @@ export class LayerManager {
|
||||
this.canvasManager = null;
|
||||
this.toolManager = null;
|
||||
|
||||
console.log("LayerManager 已销毁");
|
||||
// console.log("LayerManager 已销毁");
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -2652,13 +2651,13 @@ export class LayerManager {
|
||||
// 启用红绿图模式
|
||||
enableRedGreenMode() {
|
||||
this.isRedGreenMode = true;
|
||||
console.log("图层管理器：红绿图模式已启用");
|
||||
// console.log("图层管理器：红绿图模式已启用");
|
||||
}
|
||||
|
||||
// 禁用红绿图模式
|
||||
disableRedGreenMode() {
|
||||
this.isRedGreenMode = false;
|
||||
console.log("图层管理器：红绿图模式已禁用");
|
||||
// console.log("图层管理器：红绿图模式已禁用");
|
||||
}
|
||||
|
||||
// 检查是否为红绿图模式
|
||||
@@ -2708,14 +2707,14 @@ export class LayerManager {
|
||||
: LayerSortUtils.shouldUseAsyncProcessing(objectsCount, layersCount);
|
||||
|
||||
if (shouldUseAsync) {
|
||||
console.log(
|
||||
`使用异步排序处理 ${objectsCount} 个对象, ${layersCount} 个图层`
|
||||
);
|
||||
// console.log(
|
||||
// `使用异步排序处理 ${objectsCount} 个对象, ${layersCount} 个图层`
|
||||
// );
|
||||
return this.layerSort.rearrangeObjectsAsync();
|
||||
} else {
|
||||
console.log(
|
||||
`使用同步排序处理 ${objectsCount} 个对象, ${layersCount} 个图层`
|
||||
);
|
||||
// console.log(
|
||||
// `使用同步排序处理 ${objectsCount} 个对象, ${layersCount} 个图层`
|
||||
// );
|
||||
this.layerSort.rearrangeObjects();
|
||||
}
|
||||
}
|
||||
@@ -2735,7 +2734,7 @@ export class LayerManager {
|
||||
const result = this.layerSort.smartSort(targetLayerIds);
|
||||
|
||||
if (result) {
|
||||
console.log("智能排序完成");
|
||||
// console.log("智能排序完成");
|
||||
// 更新对象交互性
|
||||
this.updateLayersObjectsInteractivity();
|
||||
}
|
||||
@@ -2761,9 +2760,9 @@ export class LayerManager {
|
||||
const stats = this.layerSort.optimizeLayerStructure();
|
||||
|
||||
if (stats.removedEmptyLayers > 0 || stats.reorderedLayers > 0) {
|
||||
console.log(
|
||||
`图层结构优化完成: 清理空图层 ${stats.removedEmptyLayers} 个, 重新排序 ${stats.reorderedLayers} 个图层`
|
||||
);
|
||||
// console.log(
|
||||
// `图层结构优化完成: 清理空图层 ${stats.removedEmptyLayers} 个, 重新排序 ${stats.reorderedLayers} 个图层`
|
||||
// );
|
||||
// 更新对象交互性
|
||||
this.updateLayersObjectsInteractivity();
|
||||
}
|
||||
@@ -2838,9 +2837,9 @@ export class LayerManager {
|
||||
});
|
||||
|
||||
if (result) {
|
||||
console.log(
|
||||
`图层 ${layerId} - oldIndex: ${oldIndex} 已移动到位置 ${newIndex}`
|
||||
);
|
||||
// console.log(
|
||||
// `图层 ${layerId} - oldIndex: ${oldIndex} 已移动到位置 ${newIndex}`
|
||||
// );
|
||||
// 更新对象交互性
|
||||
// this.updateLayersObjectsInteractivity();
|
||||
}
|
||||
@@ -2917,9 +2916,9 @@ export class LayerManager {
|
||||
const result = this.layerSort.reorderLayers(oldIndex, newIndex, layerId);
|
||||
|
||||
if (result) {
|
||||
console.log(
|
||||
`高级排序完成: 图层 ${layerId} 从位置 ${oldIndex} 移动到 ${newIndex}`
|
||||
);
|
||||
// console.log(
|
||||
// `高级排序完成: 图层 ${layerId} 从位置 ${oldIndex} 移动到 ${newIndex}`
|
||||
// );
|
||||
// 更新对象交互性
|
||||
this.updateLayersObjectsInteractivity();
|
||||
}
|
||||
@@ -2944,9 +2943,9 @@ export class LayerManager {
|
||||
);
|
||||
|
||||
if (result) {
|
||||
console.log(
|
||||
`高级子图层排序完成: 图层 ${layerId} 在父图层 ${parentId} 中从位置 ${oldIndex} 移动到 ${newIndex}`
|
||||
);
|
||||
// console.log(
|
||||
// `高级子图层排序完成: 图层 ${layerId} 在父图层 ${parentId} 中从位置 ${oldIndex} 移动到 ${newIndex}`
|
||||
// );
|
||||
// 重新排列画布对象
|
||||
this.rearrangeCanvasObjects();
|
||||
}
|
||||
@@ -2971,7 +2970,7 @@ export class LayerManager {
|
||||
// 重新排列画布对象
|
||||
this.rearrangeCanvasObjects();
|
||||
|
||||
console.log("使用LayerSort工具完成图层排序");
|
||||
// console.log("使用LayerSort工具完成图层排序");
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -2979,7 +2978,7 @@ export class LayerManager {
|
||||
* 当图层顺序发生变化后调用此方法确保画布对象顺序正确
|
||||
*/
|
||||
forceRebuildCanvasOrder() {
|
||||
console.log("强制重建画布对象顺序");
|
||||
// console.log("强制重建画布对象顺序");
|
||||
|
||||
if (this.layerSort) {
|
||||
// 使用LayerSort的高级排序
|
||||
@@ -3010,7 +3009,7 @@ export class LayerManager {
|
||||
return false;
|
||||
}
|
||||
|
||||
console.log(`开始批量重新排序 ${reorderOperations.length} 个图层`);
|
||||
// console.log(`开始批量重新排序 ${reorderOperations.length} 个图层`);
|
||||
|
||||
let allSuccessful = true;
|
||||
|
||||
@@ -3042,7 +3041,7 @@ export class LayerManager {
|
||||
}
|
||||
|
||||
if (allSuccessful) {
|
||||
console.log("批量图层排序完成");
|
||||
// console.log("批量图层排序完成");
|
||||
} else {
|
||||
console.warn("批量图层排序部分失败");
|
||||
}
|
||||
@@ -3079,11 +3078,11 @@ export class LayerManager {
|
||||
// 执行命令
|
||||
if (this.commandManager) {
|
||||
const result = await this.commandManager.execute(command);
|
||||
result && console.log(`✅ 成功合并组图层: ${groupLayer.name}`);
|
||||
// result && console.log(`✅ 成功合并组图层: ${groupLayer.name}`);
|
||||
return result;
|
||||
} else {
|
||||
const result = await command.execute();
|
||||
result && console.log(`✅ 成功合并组图层: ${groupLayer.name}`);
|
||||
// result && console.log(`✅ 成功合并组图层: ${groupLayer.name}`);
|
||||
return result || [];
|
||||
}
|
||||
}
|
||||
@@ -3132,13 +3131,13 @@ export class LayerManager {
|
||||
if (this.commandManager) {
|
||||
const result = await this.commandManager.execute(command);
|
||||
if (result) {
|
||||
console.log(`✅ 成功栅格化图层: ${targetLayer.name}`);
|
||||
// console.log(`✅ 成功栅格化图层: ${targetLayer.name}`);
|
||||
}
|
||||
return result;
|
||||
} else {
|
||||
const result = await command.execute();
|
||||
if (result) {
|
||||
console.log(`✅ 成功栅格化图层: ${targetLayer.name}`);
|
||||
// console.log(`✅ 成功栅格化图层: ${targetLayer.name}`);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
@@ -3209,13 +3208,13 @@ export class LayerManager {
|
||||
if (this.commandManager) {
|
||||
const result = await this.commandManager.execute(command);
|
||||
if (result) {
|
||||
console.log(`✅ 成功导出图层: ${targetLayer.name}`);
|
||||
// console.log(`✅ 成功导出图层: ${targetLayer.name}`);
|
||||
}
|
||||
return result;
|
||||
} else {
|
||||
const result = await command.execute();
|
||||
if (result) {
|
||||
console.log(`✅ 成功导出图层: ${targetLayer.name}`);
|
||||
// console.log(`✅ 成功导出图层: ${targetLayer.name}`);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
@@ -3259,7 +3258,7 @@ export class LayerManager {
|
||||
// 执行命令
|
||||
const result = await command.execute(false);
|
||||
if (result) {
|
||||
console.log(`✅ 成功导出图层: ${targetLayer.name}`);
|
||||
// console.log(`✅ 成功导出图层: ${targetLayer.name}`);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
@@ -3294,12 +3293,12 @@ export class LayerManager {
|
||||
const isSginleObject = e.target === activeSelection?._objects?.[0];
|
||||
if (e.target === activeSelection || isSginleObject) {
|
||||
hasMoved = false; // 重置移动状态
|
||||
console.log("🎯 开始移动组选择对象");
|
||||
// console.log("🎯 开始移动组选择对象");
|
||||
// 记录遮罩初始位置
|
||||
console.log(
|
||||
"🖼️ 记录遮罩初始位置",
|
||||
`${layer.clippingMask.left || 0}, ${layer.clippingMask.top || 0}`
|
||||
);
|
||||
// console.log(
|
||||
// "🖼️ 记录遮罩初始位置",
|
||||
// `${layer.clippingMask.left || 0}, ${layer.clippingMask.top || 0}`
|
||||
// );
|
||||
// 记录初始位置
|
||||
initialLeft = isSginleObject ? e.target.left : activeSelection.left;
|
||||
initialTop = isSginleObject ? e.target.top : activeSelection.top;
|
||||
@@ -3366,12 +3365,12 @@ export class LayerManager {
|
||||
const isSginleObject = e.target === activeSelection?._objects?.[0];
|
||||
if (isSginleObject) {
|
||||
// 如果是单个对象，不处理
|
||||
console.log("🚫 单个对象不处理移动完成");
|
||||
// console.log("🚫 单个对象不处理移动完成");
|
||||
hasMoved = false; // 重置移动状态
|
||||
return;
|
||||
}
|
||||
if ((target === activeSelection || isSginleObject) && hasMoved) {
|
||||
console.log("✅ 组选择对象移动完成");
|
||||
// console.log("✅ 组选择对象移动完成");
|
||||
|
||||
// 计算最终移动距离
|
||||
const deltaX = target.left - initialLeft;
|
||||
@@ -3410,7 +3409,7 @@ export class LayerManager {
|
||||
// 鼠标抬起事件处理 - 备用方案
|
||||
const handleMouseUp = (e) => {
|
||||
if (hasMoved && this.canvas.getActiveObject() === activeSelection) {
|
||||
console.log("🖱️ 鼠标抬起 - 备用移动完成处理");
|
||||
// console.log("🖱️ 鼠标抬起 - 备用移动完成处理");
|
||||
handleModified(e);
|
||||
}
|
||||
};
|
||||
@@ -3424,7 +3423,7 @@ export class LayerManager {
|
||||
this.canvas.off("selection:cleared", cleanup);
|
||||
this.canvas.off("selection:updated", cleanup);
|
||||
|
||||
console.log("🧹 清理组遮罩移动同步事件监听器");
|
||||
// console.log("🧹 清理组遮罩移动同步事件监听器");
|
||||
};
|
||||
|
||||
// 绑定事件监听器
|
||||
@@ -3437,7 +3436,7 @@ export class LayerManager {
|
||||
this.canvas.on("selection:cleared", cleanup);
|
||||
this.canvas.on("selection:updated", cleanup);
|
||||
|
||||
console.log("🎨 已设置组遮罩移动同步 - 使用 object:modified 事件");
|
||||
// console.log("🎨 已设置组遮罩移动同步 - 使用 object:modified 事件");
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -27,7 +27,7 @@ export class ThumbnailManager {
|
||||
const { layer } = findLayerRecursively(this.layers.value, layerId);
|
||||
|
||||
if (!fabricObjects || fabricObjects.length === 0) {
|
||||
console.warn("⚠️ 无法生成缩略图：没有可栅格化的对象 返回空缩略图");
|
||||
// console.warn("⚠️ 无法生成缩略图：没有可栅格化的对象 返回空缩略图");
|
||||
// 如果没有对象，返回默认缩略图
|
||||
if (layer) {
|
||||
layer.thumbnailUrl = this.defaultThumbnail; // 更新图层对象的缩略图
|
||||
@@ -123,7 +123,7 @@ export class ThumbnailManager {
|
||||
*/
|
||||
_collectLayersAndObjects(layerId) {
|
||||
if (!layerId) {
|
||||
console.warn("⚠️ 无效的图层ID，无法收集对象");
|
||||
// console.warn("⚠️ 无效的图层ID，无法收集对象");
|
||||
return [];
|
||||
}
|
||||
|
||||
@@ -199,17 +199,17 @@ export class ThumbnailManager {
|
||||
// 提取排序后的对象
|
||||
const objectsToRasterize = objectsWithZIndex.map((item) => item.object);
|
||||
|
||||
console.log(
|
||||
`📊 收集到 ${layersToRasterize.length} 个图层，${objectsToRasterize.length} 个对象进行栅格化`
|
||||
);
|
||||
console.log(
|
||||
"🔢 对象z-index顺序:",
|
||||
objectsWithZIndex.map((item) => ({
|
||||
id: item.object.id,
|
||||
type: item.object.type,
|
||||
zIndex: item.zIndex,
|
||||
}))
|
||||
);
|
||||
// console.log(
|
||||
// `📊 收集到 ${layersToRasterize.length} 个图层，${objectsToRasterize.length} 个对象进行栅格化`
|
||||
// );
|
||||
// console.log(
|
||||
// "🔢 对象z-index顺序:",
|
||||
// objectsWithZIndex.map((item) => ({
|
||||
// id: item.object.id,
|
||||
// type: item.object.type,
|
||||
// zIndex: item.zIndex,
|
||||
// }))
|
||||
// );
|
||||
|
||||
return objectsToRasterize;
|
||||
}
|
||||
|
||||
@@ -420,7 +420,7 @@ export class ToolManager {
|
||||
|
||||
// 设置工具特定的状态
|
||||
if (tool && typeof tool.setup === "function") {
|
||||
console.log(`画布切换工具:${tool.name}(${toolId})`)
|
||||
// console.log(`画布切换工具:${tool.name}(${toolId})`)
|
||||
this.canvas.toolId = toolId;
|
||||
tool.setup();
|
||||
}
|
||||
@@ -695,7 +695,7 @@ export class ToolManager {
|
||||
|
||||
// // 设置矩形选区模式
|
||||
// // 这里需要具体的矩形选区工具实现
|
||||
console.log("矩形选区工具已激活");
|
||||
// console.log("矩形选区工具已激活");
|
||||
|
||||
if (this.canvasManager && this.canvasManager.selectionManager) {
|
||||
this.canvasManager.selectionManager.setCurrentTool(
|
||||
@@ -894,7 +894,7 @@ export class ToolManager {
|
||||
this._rasterizeLayerForLiquify(layerId);
|
||||
},
|
||||
onCancel: () => {
|
||||
console.log("用户取消了栅格化操作");
|
||||
// console.log("用户取消了栅格化操作");
|
||||
// 用户取消，触发液化面板显示事件但不能液化
|
||||
document.dispatchEvent(
|
||||
new CustomEvent("showLiquifyPanel", {
|
||||
@@ -1286,7 +1286,7 @@ export class ToolManager {
|
||||
*/
|
||||
showTextEditor(textObject, layer) {
|
||||
// 这个方法将在TextEditorPanel组件实现后调用
|
||||
console.log("显示文本编辑面板", textObject, layer);
|
||||
// console.log("显示文本编辑面板", textObject, layer);
|
||||
// 将发出一个事件，让Vue组件捕获并显示编辑面板
|
||||
document.dispatchEvent(
|
||||
new CustomEvent("showTextEditor", {
|
||||
@@ -1302,7 +1302,7 @@ export class ToolManager {
|
||||
*/
|
||||
hideTextEditor() {
|
||||
// 这个方法将在TextEditorPanel组件实现后调用
|
||||
console.log("隐藏文本编辑面板");
|
||||
// console.log("隐藏文本编辑面板");
|
||||
// 将发出一个事件，让Vue组件捕获并隐藏编辑面板
|
||||
document.dispatchEvent(
|
||||
new CustomEvent("hideTextEditor", {
|
||||
@@ -1323,7 +1323,7 @@ export class ToolManager {
|
||||
if (this.brushIndicator) {
|
||||
this.brushIndicator.dispose();
|
||||
this.brushIndicator = null;
|
||||
console.log("笔刷指示器已清理");
|
||||
// console.log("笔刷指示器已清理");
|
||||
}
|
||||
|
||||
// 移除文本编辑相关事件监听器
|
||||
@@ -1348,7 +1348,7 @@ export class ToolManager {
|
||||
this.canvas.isDrawingMode = false;
|
||||
this.canvas.selection = false;
|
||||
|
||||
console.log("文本工具已激活");
|
||||
// console.log("文本工具已激活");
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -1424,7 +1424,7 @@ export class ToolManager {
|
||||
// 切换到红色笔刷工具作为默认工具
|
||||
this.setTool(OperationType.RED_BRUSH);
|
||||
|
||||
console.log("工具管理器已进入红绿图模式");
|
||||
// console.log("工具管理器已进入红绿图模式");
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -1437,7 +1437,7 @@ export class ToolManager {
|
||||
// 切换回选择工具
|
||||
this.setTool(OperationType.SELECT);
|
||||
|
||||
console.log("工具管理器已退出红绿图模式");
|
||||
// console.log("工具管理器已退出红绿图模式");
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -1495,7 +1495,7 @@ export class ToolManager {
|
||||
// 更新指示器颜色
|
||||
this.brushIndicator.updateColor(brushColor);
|
||||
|
||||
console.log(`笔刷指示器已启用，大小: ${brushSize}, 颜色: ${brushColor}`);
|
||||
// console.log(`笔刷指示器已启用，大小: ${brushSize}, 颜色: ${brushColor}`);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -1506,7 +1506,7 @@ export class ToolManager {
|
||||
if (!this.brushIndicator) return;
|
||||
|
||||
this.brushIndicator.disable();
|
||||
console.log("笔刷指示器已禁用");
|
||||
// console.log("笔刷指示器已禁用");
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -1517,7 +1517,7 @@ export class ToolManager {
|
||||
if (!this.brushIndicator) return;
|
||||
|
||||
this.brushIndicator.updateSize(size);
|
||||
console.log(`笔刷指示器大小已更新为: ${size}`);
|
||||
// console.log(`笔刷指示器大小已更新为: ${size}`);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -1528,7 +1528,7 @@ export class ToolManager {
|
||||
if (!this.brushIndicator) return;
|
||||
|
||||
this.brushIndicator.updateColor(color);
|
||||
console.log(`笔刷指示器颜色已更新为: ${color}`);
|
||||
// console.log(`笔刷指示器颜色已更新为: ${color}`);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -299,7 +299,7 @@ export class CommandManager {
|
||||
this.undoStack = [];
|
||||
this.redoStack = [];
|
||||
this._notifyStateChange();
|
||||
console.log("📝 命令历史已清空");
|
||||
// console.log("📝 命令历史已清空");
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -485,7 +485,7 @@ export class CanvasEventManager {
|
||||
|
||||
// 调试信息
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
console.log("iPad touchstart:", e.touches.length, "fingers");
|
||||
// console.log("iPad touchstart:", e.touches.length, "fingers");
|
||||
}
|
||||
|
||||
if (e.touches.length === 2) {
|
||||
@@ -500,11 +500,11 @@ export class CanvasEventManager {
|
||||
this.touchState.zoomCenter = { x: centerX, y: centerY };
|
||||
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
console.log("iPad双指缩放开始:", {
|
||||
distance: lastTouchDistance,
|
||||
zoom: lastZoom,
|
||||
center: this.touchState.zoomCenter,
|
||||
});
|
||||
// console.log("iPad双指缩放开始:", {
|
||||
// distance: lastTouchDistance,
|
||||
// zoom: lastZoom,
|
||||
// center: this.touchState.zoomCenter,
|
||||
// });
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
@@ -554,14 +554,14 @@ export class CanvasEventManager {
|
||||
const clampedZoom = Math.max(0.1, Math.min(5, newZoom));
|
||||
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
console.log("iPad双指缩放中:", {
|
||||
currentDistance,
|
||||
lastTouchDistance,
|
||||
scale,
|
||||
currentZoom,
|
||||
newZoom,
|
||||
clampedZoom,
|
||||
});
|
||||
// console.log("iPad双指缩放中:", {
|
||||
// currentDistance,
|
||||
// lastTouchDistance,
|
||||
// scale,
|
||||
// currentZoom,
|
||||
// newZoom,
|
||||
// clampedZoom,
|
||||
// });
|
||||
}
|
||||
|
||||
// 使用缩放中心点进行缩放
|
||||
@@ -839,7 +839,7 @@ export class CanvasEventManager {
|
||||
const hasNewImage = !!fabricImage;
|
||||
|
||||
if (!hasExistingObjects && !hasNewImage) {
|
||||
console.log("没有对象需要合并");
|
||||
// console.log("没有对象需要合并");
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -851,7 +851,7 @@ export class CanvasEventManager {
|
||||
|
||||
// 执行高保真合并操作
|
||||
try {
|
||||
console.log(`开始合并图层 ${activeLayer.name} 中的对象为组...`);
|
||||
// console.log(`开始合并图层 ${activeLayer.name} 中的对象为组...`);
|
||||
|
||||
const command = await this.layerManager.LayerObjectsToGroup(
|
||||
activeLayer,
|
||||
@@ -869,7 +869,7 @@ export class CanvasEventManager {
|
||||
|
||||
// 降级处理：如果合并失败，至少保证新图像能添加到图层
|
||||
if (fabricImage && this.layerManager) {
|
||||
console.log("执行降级处理：直接添加图像到图层");
|
||||
// console.log("执行降级处理：直接添加图像到图层");
|
||||
this.layerManager.addObjectToLayer(fabricImage, activeLayer.id);
|
||||
}
|
||||
}
|
||||
@@ -1011,15 +1011,15 @@ export class CanvasEventManager {
|
||||
|
||||
// 调试日志 - 仅在开发环境输出
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
console.log("设备检测结果:", {
|
||||
userAgent,
|
||||
platform,
|
||||
isMobile,
|
||||
isTablet,
|
||||
isDesktop,
|
||||
hasTouchSupport,
|
||||
maxTouchPoints: navigator.maxTouchPoints,
|
||||
});
|
||||
// console.log("设备检测结果:", {
|
||||
// userAgent,
|
||||
// platform,
|
||||
// isMobile,
|
||||
// isTablet,
|
||||
// isDesktop,
|
||||
// hasTouchSupport,
|
||||
// maxTouchPoints: navigator.maxTouchPoints,
|
||||
// });
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
@@ -219,7 +219,7 @@ export class KeyboardManager {
|
||||
const text = event.clipboardData?.getData("text/plain") || "";
|
||||
if(/^aida_copy_canvas_layer/.test(text)) return;
|
||||
const items = event.clipboardData?.items || [];
|
||||
console.log(this);
|
||||
// console.log(this);
|
||||
for (const item of items) {
|
||||
if (item.type.indexOf("text/plain") !== -1) {
|
||||
item.getAsString((text) => {
|
||||
@@ -249,7 +249,7 @@ export class KeyboardManager {
|
||||
this.container.addEventListener("touchcancel", this._handleTouchEnd);
|
||||
}
|
||||
|
||||
console.log(`键盘管理器已初始化，平台: ${this.platform}, 触摸设备: ${this.isTouchDevice}`);
|
||||
// console.log(`键盘管理器已初始化，平台: ${this.platform}, 触摸设备: ${this.isTouchDevice}`);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -437,35 +437,35 @@ export class KeyboardManager {
|
||||
|
||||
case "copy":
|
||||
// 复制逻辑
|
||||
console.log("复制当前选中图层");
|
||||
// console.log("复制当前选中图层");
|
||||
if(this.isRedGreenMode.value) return;
|
||||
this.layerManager.copyLayer(this.layerManager.activeLayerId.value);
|
||||
break;
|
||||
|
||||
case "paste":
|
||||
// 粘贴逻辑
|
||||
console.log("粘贴");
|
||||
// console.log("粘贴");
|
||||
if(this.isRedGreenMode.value) return;
|
||||
this.layerManager.pasteLayer();
|
||||
break;
|
||||
|
||||
case "cut":
|
||||
// 剪切逻辑
|
||||
console.log("剪切");
|
||||
// console.log("剪切");
|
||||
if(this.isRedGreenMode.value) return;
|
||||
this.layerManager.cutLayer(this.layerManager.activeLayerId.value);
|
||||
break;
|
||||
|
||||
case "delete":
|
||||
// 删除逻辑
|
||||
console.log("删除");
|
||||
// console.log("删除");
|
||||
if(this.isRedGreenMode.value) return;
|
||||
this.layerManager.removeLayer(this.layerManager.activeLayerId.value);
|
||||
break;
|
||||
|
||||
case "selectAll":
|
||||
// 全选逻辑
|
||||
console.log("全选");
|
||||
// console.log("全选");
|
||||
if(this.isRedGreenMode.value) return;
|
||||
// 这里需要实现全选逻辑 TODO: 是否在选择模式下才可以全选？
|
||||
if (this.layerManager) {
|
||||
@@ -475,7 +475,7 @@ export class KeyboardManager {
|
||||
|
||||
case "clearSelection":
|
||||
// 清除选择逻辑
|
||||
console.log("清除选择");
|
||||
// console.log("清除选择");
|
||||
// 这里需要实现清除选择逻辑
|
||||
if (this.layerManager) {
|
||||
this.layerManager.clearSelection();
|
||||
@@ -484,7 +484,7 @@ export class KeyboardManager {
|
||||
|
||||
case "save":
|
||||
// 保存逻辑
|
||||
console.log("保存");
|
||||
// console.log("保存");
|
||||
break;
|
||||
|
||||
case "selectTool":
|
||||
@@ -591,7 +591,7 @@ export class KeyboardManager {
|
||||
|
||||
case "contextMenu":
|
||||
// 上下文菜单（通常由右击或触控设备上的特定手势触发）
|
||||
console.log("显示上下文菜单");
|
||||
// console.log("显示上下文菜单");
|
||||
// 这里需要实现显示上下文菜单的逻辑
|
||||
break;
|
||||
|
||||
|
||||
@@ -30,7 +30,7 @@ export class LiquifyStateManager {
|
||||
// 设备性能检测
|
||||
this.devicePerformance = this._detectDevicePerformance();
|
||||
|
||||
console.log("🎯 液化状态管理器已初始化，设备性能等级:", this.devicePerformance);
|
||||
// console.log("🎯 液化状态管理器已初始化，设备性能等级:", this.devicePerformance);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -48,7 +48,7 @@ export class LiquifyStateManager {
|
||||
// 显示操作反馈
|
||||
this._showOperationFeedback();
|
||||
|
||||
console.log("🚀 开始液化操作");
|
||||
// console.log("🚀 开始液化操作");
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -68,7 +68,7 @@ export class LiquifyStateManager {
|
||||
// 禁用不必要的画布功能
|
||||
this._disableCanvasFeatures();
|
||||
|
||||
console.log("🖱️ 开始拖拽操作");
|
||||
// console.log("🖱️ 开始拖拽操作");
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -98,7 +98,7 @@ export class LiquifyStateManager {
|
||||
}
|
||||
}
|
||||
|
||||
console.log("✅ 结束拖拽操作");
|
||||
// console.log("✅ 结束拖拽操作");
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -116,7 +116,7 @@ export class LiquifyStateManager {
|
||||
// 隐藏操作反馈
|
||||
this._hideOperationFeedback();
|
||||
|
||||
console.log(`⏱️ 液化操作完成，耗时: ${operationTime.toFixed(2)}ms`);
|
||||
// console.log(`⏱️ 液化操作完成，耗时: ${operationTime.toFixed(2)}ms`);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -158,11 +158,11 @@ export class LiquifyStateManager {
|
||||
// 根据性能数据动态调整设置
|
||||
this._adaptivePerformanceOptimization(operationTime);
|
||||
|
||||
console.log(
|
||||
`📊 记录性能指标: ${operationType}/${mode}, 耗时: ${operationTime.toFixed(
|
||||
2
|
||||
)}ms, 渲染模式: ${renderMode}`
|
||||
);
|
||||
// console.log(
|
||||
// `📊 记录性能指标: ${operationType}/${mode}, 耗时: ${operationTime.toFixed(
|
||||
// 2
|
||||
// )}ms, 渲染模式: ${renderMode}`
|
||||
// );
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -179,7 +179,7 @@ export class LiquifyStateManager {
|
||||
const currentQuality = this.realtimeUpdater.config.imageQuality || 1.0;
|
||||
if (currentQuality > 0.7) {
|
||||
this.realtimeUpdater.setImageQuality(Math.max(0.7, currentQuality - 0.1));
|
||||
console.log("⚡ 自动降低图像质量以提升性能");
|
||||
// console.log("⚡ 自动降低图像质量以提升性能");
|
||||
}
|
||||
|
||||
// 增加节流时间
|
||||
@@ -188,7 +188,7 @@ export class LiquifyStateManager {
|
||||
33,
|
||||
this.realtimeUpdater.config.throttleTime + 8
|
||||
);
|
||||
console.log("⏱️ 自动增加节流时间以提升性能");
|
||||
// console.log("⏱️ 自动增加节流时间以提升性能");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -228,7 +228,7 @@ export class LiquifyStateManager {
|
||||
this._updateCursor("default");
|
||||
this.cursorCache.clear();
|
||||
|
||||
console.log("🧹 液化状态管理器已清理");
|
||||
// console.log("🧹 液化状态管理器已清理");
|
||||
}
|
||||
|
||||
// === 私有方法 ===
|
||||
|
||||
@@ -22,7 +22,7 @@ export const createRasterizedImage = async ({
|
||||
isGroupWithMask = false, // 是否为带遮罩的组图层
|
||||
} = {}) => {
|
||||
try {
|
||||
console.log(`📊 开始栅格化 ${fabricObjects.length} 个对象${maskObject ? "（带遮罩）" : ""}`);
|
||||
// console.log(`📊 开始栅格化 ${fabricObjects.length} 个对象${maskObject ? "（带遮罩）" : ""}`);
|
||||
|
||||
// 确保有对象需要栅格化
|
||||
if (fabricObjects.length === 0) {
|
||||
@@ -36,7 +36,7 @@ export const createRasterizedImage = async ({
|
||||
|
||||
if (isThumbnail) scaleFactor = 0.2; // 缩略图使用较小的高清倍数
|
||||
|
||||
console.log(`高清倍数: ${scaleFactor}, 当前缩放: ${currentZoom}`);
|
||||
// console.log(`高清倍数: ${scaleFactor}, 当前缩放: ${currentZoom}`);
|
||||
|
||||
// 如果有遮罩且保持原始质量，使用高质量的遮罩处理方法
|
||||
if (maskObject && preserveOriginalQuality) {
|
||||
@@ -58,7 +58,7 @@ export const createRasterizedImage = async ({
|
||||
}
|
||||
|
||||
if (isReturenDataURL) {
|
||||
console.log("✅ 带遮罩的栅格化图像创建成功，返回DataURL");
|
||||
// console.log("✅ 带遮罩的栅格化图像创建成功，返回DataURL");
|
||||
return rasterizedImage;
|
||||
}
|
||||
|
||||
@@ -77,7 +77,7 @@ export const createRasterizedImage = async ({
|
||||
},
|
||||
});
|
||||
|
||||
console.log(`✅ 带遮罩的栅格化图像创建完成`);
|
||||
// console.log(`✅ 带遮罩的栅格化图像创建完成`);
|
||||
return rasterizedImage;
|
||||
}
|
||||
|
||||
@@ -101,7 +101,7 @@ export const createRasterizedImage = async ({
|
||||
}
|
||||
|
||||
if (isReturenDataURL) {
|
||||
console.log("✅ 栅格化图像创建成功，返回DataURL");
|
||||
// console.log("✅ 栅格化图像创建成功，返回DataURL");
|
||||
return rasterizedImage;
|
||||
}
|
||||
|
||||
@@ -120,7 +120,7 @@ export const createRasterizedImage = async ({
|
||||
},
|
||||
});
|
||||
|
||||
console.log(`✅ 栅格化图像创建完成`);
|
||||
// console.log(`✅ 栅格化图像创建完成`);
|
||||
}
|
||||
|
||||
return rasterizedImage;
|
||||
@@ -172,7 +172,7 @@ const createRasterizedImageWithGroup = async ({
|
||||
|
||||
// 获取组的绝对边界框
|
||||
const groupBounds = group.getBoundingRect(true, true);
|
||||
console.log("📏 组边界框:", groupBounds);
|
||||
// console.log("📏 组边界框:", groupBounds);
|
||||
|
||||
// 设置离屏画布尺寸，使用组的边界大小
|
||||
const canvasWidth = Math.ceil(groupBounds.width * scaleFactor);
|
||||
@@ -184,7 +184,7 @@ const createRasterizedImageWithGroup = async ({
|
||||
hasControls: false,
|
||||
});
|
||||
|
||||
console.log(`🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`);
|
||||
// console.log(`🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`);
|
||||
|
||||
// 调整组的位置，让它位于画布的左上角
|
||||
group.set({
|
||||
@@ -266,11 +266,11 @@ const createRasterizedImageWithMask = async ({
|
||||
isGroupWithMask,
|
||||
}) => {
|
||||
try {
|
||||
console.log("🎭 使用遮罩创建栅格化图像");
|
||||
// console.log("🎭 使用遮罩创建栅格化图像");
|
||||
|
||||
// 获取遮罩的边界框，这将作为最终图像的边界
|
||||
const maskBounds = maskObject.getBoundingRect(true, true);
|
||||
console.log("📏 遮罩边界框:", maskBounds);
|
||||
// console.log("📏 遮罩边界框:", maskBounds);
|
||||
|
||||
// 克隆所有对象，并清除它们的遮罩，避免重复应用
|
||||
const clonedObjects = [];
|
||||
@@ -308,7 +308,7 @@ const createRasterizedImageWithMask = async ({
|
||||
height: canvasHeight,
|
||||
});
|
||||
|
||||
console.log(`🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`);
|
||||
// console.log(`🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`);
|
||||
|
||||
// 调整对象位置，相对于遮罩边界重新定位
|
||||
clonedObjects.forEach((obj) => {
|
||||
@@ -376,7 +376,7 @@ const createRasterizedImageWithMask = async ({
|
||||
// 确保图像位置正确
|
||||
fabricImage.setCoords();
|
||||
|
||||
console.log("✅ 带遮罩的栅格化图像创建完成");
|
||||
// console.log("✅ 带遮罩的栅格化图像创建完成");
|
||||
return fabricImage;
|
||||
} catch (error) {
|
||||
console.error("带遮罩的栅格化失败:", error);
|
||||
@@ -430,12 +430,12 @@ const createFabricImageFromDataURL = (dataURL) => {
|
||||
*/
|
||||
const applyMaskToCanvas = async (canvas, maskObject, bounds) => {
|
||||
if (!maskObject) {
|
||||
console.log("没有遮罩对象，跳过遮罩应用");
|
||||
// console.log("没有遮罩对象，跳过遮罩应用");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
console.log("🎭 应用遮罩到画布");
|
||||
// console.log("🎭 应用遮罩到画布");
|
||||
|
||||
// 克隆遮罩对象，避免影响原对象
|
||||
const clonedMask = await cloneObjectAsync(maskObject);
|
||||
@@ -459,7 +459,7 @@ const applyMaskToCanvas = async (canvas, maskObject, bounds) => {
|
||||
// 将遮罩设置为画布的clipPath
|
||||
canvas.clipPath = clonedMask;
|
||||
|
||||
console.log("✅ 遮罩应用完成");
|
||||
// console.log("✅ 遮罩应用完成");
|
||||
} catch (error) {
|
||||
console.error("应用遮罩失败:", error);
|
||||
}
|
||||
|
||||
@@ -24,7 +24,7 @@ export const createRasterizedImage = async ({
|
||||
isEnhanceImg, // 是否是增强图片
|
||||
} = {}) => {
|
||||
try {
|
||||
console.log(`📊 开始栅格化 ${fabricObjects.length} 个对象`);
|
||||
// console.log(`📊 开始栅格化 ${fabricObjects.length} 个对象`);
|
||||
|
||||
// 确保有对象需要栅格化
|
||||
if (fabricObjects.length === 0) {
|
||||
@@ -86,14 +86,14 @@ const createClippedObjects = async ({
|
||||
isEnhanceImg, // 是否是增强图片
|
||||
}) => {
|
||||
try {
|
||||
console.log("🎯 使用新的图像遮罩裁剪方法创建对象");
|
||||
// console.log("🎯 使用新的图像遮罩裁剪方法创建对象");
|
||||
|
||||
// 使用优化后的边界计算，确保包含描边区域
|
||||
const optimizedBounds = calculateOptimizedBounds(
|
||||
clippingObject,
|
||||
fabricObjects
|
||||
);
|
||||
console.log("📐 优化后的选区边界框:", optimizedBounds);
|
||||
// console.log("📐 优化后的选区边界框:", optimizedBounds);
|
||||
|
||||
// 获取羽化值
|
||||
let featherAmount = 0;
|
||||
@@ -102,7 +102,7 @@ const createClippedObjects = async ({
|
||||
typeof selectionManager.getFeatherAmount === "function"
|
||||
) {
|
||||
featherAmount = selectionManager.getFeatherAmount();
|
||||
console.log(`🌟 应用羽化效果: ${featherAmount}px`);
|
||||
// console.log(`🌟 应用羽化效果: ${featherAmount}px`);
|
||||
}
|
||||
|
||||
// 方法1：如果只需要返回DataURL，使用画布裁剪方法
|
||||
@@ -160,7 +160,7 @@ const createClippedObjects = async ({
|
||||
// 更新坐标
|
||||
fabricImage.setCoords();
|
||||
|
||||
console.log("✅ 返回裁剪后的fabric对象，已恢复到优化后的原始大小和位置");
|
||||
// console.log("✅ 返回裁剪后的fabric对象，已恢复到优化后的原始大小和位置");
|
||||
return fabricImage;
|
||||
} catch (error) {
|
||||
console.warn("创建裁剪对象失败:", error);
|
||||
@@ -181,7 +181,7 @@ const createClippedDataURLByCanvas = async ({
|
||||
isEnhanceImg = false, // 是否是增强图片
|
||||
}) => {
|
||||
try {
|
||||
console.log("🖼️ 使用图像遮罩裁剪方法生成DataURL");
|
||||
// console.log("🖼️ 使用图像遮罩裁剪方法生成DataURL");
|
||||
|
||||
// 使用优化后的边界计算，确保包含描边区域
|
||||
// const optimizedBounds = calculateOptimizedBounds(
|
||||
@@ -199,18 +199,18 @@ const createClippedDataURLByCanvas = async ({
|
||||
const pixelRatio = window.devicePixelRatio || 1;
|
||||
const qualityMultiplier = !!isEnhanceImg ? Math.max(2, pixelRatio) : 1;
|
||||
|
||||
console.log("使用高分辨率以保证质量:" + isEnhanceImg, optimizedBounds);
|
||||
// console.log("使用高分辨率以保证质量:" + isEnhanceImg, optimizedBounds);
|
||||
|
||||
const canvasWidth = Math.ceil(optimizedBounds.width * qualityMultiplier);
|
||||
const canvasHeight = Math.ceil(optimizedBounds.height * qualityMultiplier);
|
||||
|
||||
console.log(
|
||||
`📏 优化后画布尺寸: ${canvasWidth}x${canvasHeight} (质量倍数: ${qualityMultiplier})`
|
||||
);
|
||||
console.log("🎯 边界框对比:", {
|
||||
original: selectionBounds,
|
||||
optimized: optimizedBounds,
|
||||
});
|
||||
// console.log(
|
||||
// `📏 优化后画布尺寸: ${canvasWidth}x${canvasHeight} (质量倍数: ${qualityMultiplier})`
|
||||
// );
|
||||
// console.log("🎯 边界框对比:", {
|
||||
// original: selectionBounds,
|
||||
// optimized: optimizedBounds,
|
||||
// });
|
||||
|
||||
// 步骤1: 先将路径转换为遮罩图像（支持羽化）
|
||||
const maskImageDataURL =
|
||||
@@ -242,7 +242,7 @@ const createClippedDataURLByCanvas = async ({
|
||||
canvasHeight,
|
||||
});
|
||||
|
||||
console.log("✅ 图像遮罩裁剪完成，生成DataURL");
|
||||
// console.log("✅ 图像遮罩裁剪完成，生成DataURL");
|
||||
return clippedDataURL;
|
||||
} catch (error) {
|
||||
console.error("图像遮罩裁剪失败:", error);
|
||||
@@ -262,7 +262,7 @@ const createSimpleClone = async ({
|
||||
format,
|
||||
}) => {
|
||||
try {
|
||||
console.log("📋 创建简单克隆对象");
|
||||
// console.log("📋 创建简单克隆对象");
|
||||
|
||||
const clonedObjects = [];
|
||||
|
||||
@@ -370,7 +370,7 @@ const renderObjectsToDataURL = async (objects, quality, format) => {
|
||||
*/
|
||||
const renderClippedObjectsToDataURL = async (clippedObjects) => {
|
||||
try {
|
||||
console.log("🖼️ 渲染裁剪对象为DataURL");
|
||||
// console.log("🖼️ 渲染裁剪对象为DataURL");
|
||||
|
||||
// 计算所有裁剪对象的总边界框
|
||||
let totalBounds = null;
|
||||
@@ -450,7 +450,7 @@ const renderClippedObjectsToDataURL = async (clippedObjects) => {
|
||||
// 清理临时画布
|
||||
tempCanvas.dispose();
|
||||
|
||||
console.log("✅ 裁剪对象渲染完成");
|
||||
// console.log("✅ 裁剪对象渲染完成");
|
||||
return dataURL;
|
||||
} catch (error) {
|
||||
console.error("渲染裁剪对象失败:", error);
|
||||
@@ -472,7 +472,7 @@ const createLegacyRasterization = async ({
|
||||
isCropByBg, // 是否根据背景裁剪
|
||||
isEnhanceImg, // 是否是增强图片
|
||||
}) => {
|
||||
console.log("⚠️ 使用兼容的离屏渲染方法");
|
||||
// console.log("⚠️ 使用兼容的离屏渲染方法");
|
||||
|
||||
// 这里保留原有的离屏渲染逻辑作为备选方案
|
||||
const currentZoom = canvas.getZoom?.() || 1;
|
||||
@@ -522,12 +522,12 @@ const calculateBounds = (fabricObjects) => {
|
||||
// 获取绝对边界框（原始大小和位置）
|
||||
const absoluteBound = obj.getBoundingRect(true, true);
|
||||
|
||||
console.log(`对象 ${obj.id || index} 边界框比较:`, {
|
||||
relative: relativeBound,
|
||||
absolute: absoluteBound,
|
||||
scaleX: obj.scaleX,
|
||||
scaleY: obj.scaleY,
|
||||
});
|
||||
// console.log(`对象 ${obj.id || index} 边界框比较:`, {
|
||||
// relative: relativeBound,
|
||||
// absolute: absoluteBound,
|
||||
// scaleX: obj.scaleX,
|
||||
// scaleY: obj.scaleY,
|
||||
// });
|
||||
|
||||
// 计算绝对边界框的累积范围
|
||||
if (!absoluteBounds) {
|
||||
@@ -600,7 +600,7 @@ const createOffscreenRasterization = async ({
|
||||
let renderBounds = absoluteBounds;
|
||||
if (clippingObject) {
|
||||
const clippingBounds = clippingObject.getBoundingRect(true, true);
|
||||
console.log("🎯 使用裁剪对象边界框:", clippingBounds);
|
||||
// console.log("🎯 使用裁剪对象边界框:", clippingBounds);
|
||||
renderBounds = clippingBounds;
|
||||
}
|
||||
|
||||
@@ -613,9 +613,9 @@ const createOffscreenRasterization = async ({
|
||||
height: canvasHeight,
|
||||
});
|
||||
|
||||
console.log(
|
||||
`🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`
|
||||
);
|
||||
// console.log(
|
||||
// `🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`
|
||||
// );
|
||||
|
||||
// 克隆对象到离屏画布
|
||||
const clonedObjects = [];
|
||||
@@ -786,7 +786,7 @@ const createMaskImageFromPath = async ({
|
||||
qualityMultiplier,
|
||||
}) => {
|
||||
try {
|
||||
console.log("🎭 创建路径遮罩图像");
|
||||
// console.log("🎭 创建路径遮罩图像");
|
||||
|
||||
// 创建专门用于渲染遮罩的画布
|
||||
const maskCanvas = new fabric.StaticCanvas();
|
||||
@@ -820,7 +820,7 @@ const createMaskImageFromPath = async ({
|
||||
// 清理遮罩画布
|
||||
maskCanvas.dispose();
|
||||
|
||||
console.log("✅ 遮罩图像创建完成");
|
||||
// console.log("✅ 遮罩图像创建完成");
|
||||
return maskDataURL;
|
||||
} catch (error) {
|
||||
console.error("创建遮罩图像失败:", error);
|
||||
@@ -841,7 +841,7 @@ const renderContentToImage = async ({
|
||||
qualityMultiplier,
|
||||
}) => {
|
||||
try {
|
||||
console.log("🖼️ 渲染内容图像");
|
||||
// console.log("🖼️ 渲染内容图像");
|
||||
|
||||
// 创建内容渲染画布
|
||||
const contentCanvas = new fabric.StaticCanvas();
|
||||
@@ -880,7 +880,6 @@ const renderContentToImage = async ({
|
||||
// if(obj.globalCompositeOperation === "multiply"){
|
||||
// clonedObj.clipPath = null;
|
||||
// }
|
||||
console.log("==========", obj.id, obj.layerName);
|
||||
contentCanvas.add(clonedObj);
|
||||
}
|
||||
|
||||
@@ -897,7 +896,7 @@ const renderContentToImage = async ({
|
||||
// 清理内容画布
|
||||
contentCanvas.dispose();
|
||||
|
||||
console.log("✅ 内容图像渲染完成");
|
||||
// console.log("✅ 内容图像渲染完成");
|
||||
return contentDataURL;
|
||||
} catch (error) {
|
||||
console.error("渲染内容图像失败:", error);
|
||||
@@ -920,7 +919,7 @@ const applyImageMask = async ({
|
||||
canvasHeight,
|
||||
}) => {
|
||||
try {
|
||||
console.log("🎯 应用图像遮罩");
|
||||
// console.log("🎯 应用图像遮罩");
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
// 创建用于合成的Canvas元素
|
||||
@@ -952,7 +951,7 @@ const applyImageMask = async ({
|
||||
// 获取最终结果
|
||||
const resultDataURL = compositeCanvas.toDataURL("image/png", 1.0);
|
||||
|
||||
console.log("✅ 图像遮罩应用完成");
|
||||
// console.log("✅ 图像遮罩应用完成");
|
||||
resolve(resultDataURL);
|
||||
} catch (error) {
|
||||
console.error("合成图像失败:", error);
|
||||
@@ -994,7 +993,7 @@ const createAdvancedMaskImage = async ({
|
||||
featherAmount = 0,
|
||||
}) => {
|
||||
try {
|
||||
console.log(`🎭 创建高级遮罩图像 (羽化: ${featherAmount})`);
|
||||
// console.log(`🎭 创建高级遮罩图像 (羽化: ${featherAmount})`);
|
||||
|
||||
// 创建专门用于渲染遮罩的画布
|
||||
const maskCanvas = new fabric.StaticCanvas();
|
||||
@@ -1047,7 +1046,7 @@ const createAdvancedMaskImage = async ({
|
||||
// 清理遮罩画布
|
||||
maskCanvas.dispose();
|
||||
|
||||
console.log("✅ 高级遮罩图像创建完成");
|
||||
// console.log("✅ 高级遮罩图像创建完成");
|
||||
return maskDataURL;
|
||||
} catch (error) {
|
||||
console.error("创建高级遮罩图像失败:", error);
|
||||
@@ -1116,7 +1115,7 @@ const createSolidMaskPath = async (
|
||||
qualityMultiplier
|
||||
) => {
|
||||
try {
|
||||
console.log("🔧 创建实体遮罩路径，处理描边转填充");
|
||||
// console.log("🔧 创建实体遮罩路径，处理描边转填充");
|
||||
|
||||
// 克隆原始对象
|
||||
const maskPath = await cloneObjectAsync(clippingObject);
|
||||
@@ -1125,9 +1124,9 @@ const createSolidMaskPath = async (
|
||||
const hasStroke = maskPath.stroke && maskPath.strokeWidth > 0;
|
||||
|
||||
if (hasStroke) {
|
||||
console.log(
|
||||
`📏 检测到描边: ${maskPath.stroke}, 宽度: ${maskPath.strokeWidth}`
|
||||
);
|
||||
// console.log(
|
||||
// `📏 检测到描边: ${maskPath.stroke}, 宽度: ${maskPath.strokeWidth}`
|
||||
// );
|
||||
|
||||
// 对于有描边的路径，我们需要更精确的处理
|
||||
const strokeWidth = maskPath.strokeWidth;
|
||||
@@ -1182,7 +1181,7 @@ const createSolidMaskPath = async (
|
||||
});
|
||||
}
|
||||
|
||||
console.log(`✅ 描边已转换为填充，类型: ${maskPath.type}`);
|
||||
// console.log(`✅ 描边已转换为填充，类型: ${maskPath.type}`);
|
||||
} else {
|
||||
// 没有描边，直接处理位置和缩放
|
||||
maskPath.set({
|
||||
@@ -1216,7 +1215,7 @@ const createSolidMaskPath = async (
|
||||
*/
|
||||
const calculateOptimizedBounds = (clippingObject, fabricObjects) => {
|
||||
try {
|
||||
console.log("📐 计算优化后的边界框");
|
||||
// console.log("📐 计算优化后的边界框");
|
||||
|
||||
// 获取裁剪对象的边界框（包含描边）
|
||||
const clippingBounds = clippingObject.getBoundingRect(true, true);
|
||||
@@ -1232,7 +1231,7 @@ const calculateOptimizedBounds = (clippingObject, fabricObjects) => {
|
||||
clippingBounds.width += strokeWidth;
|
||||
clippingBounds.height += strokeWidth;
|
||||
|
||||
console.log(`🖊️ 调整描边边界框，描边宽度: ${strokeWidth}`);
|
||||
// console.log(`🖊️ 调整描边边界框，描边宽度: ${strokeWidth}`);
|
||||
}
|
||||
|
||||
// 计算内容对象的边界框
|
||||
@@ -1246,11 +1245,11 @@ const calculateOptimizedBounds = (clippingObject, fabricObjects) => {
|
||||
height: Math.max(1, clippingBounds.height),
|
||||
};
|
||||
|
||||
console.log("✅ 边界框优化完成", {
|
||||
original: clippingObject.getBoundingRect(true, true),
|
||||
optimized: optimizedBounds,
|
||||
hasStroke: !!(clippingObject.stroke && clippingObject.strokeWidth > 0),
|
||||
});
|
||||
// console.log("✅ 边界框优化完成", {
|
||||
// original: clippingObject.getBoundingRect(true, true),
|
||||
// optimized: optimizedBounds,
|
||||
// hasStroke: !!(clippingObject.stroke && clippingObject.strokeWidth > 0),
|
||||
// });
|
||||
|
||||
return optimizedBounds;
|
||||
} catch (error) {
|
||||
|
||||
@@ -137,7 +137,6 @@
|
||||
<button @click="onAdd">添加</button>
|
||||
<div class="box">
|
||||
<pingpu
|
||||
:list="list"
|
||||
ref="pingpuRef"
|
||||
:width="600"
|
||||
:height="900"
|
||||
@@ -161,58 +160,7 @@
|
||||
const convertDotNotationToBracket = (str) =>
|
||||
str.replace(/(?:^|\.)(\d+)(?=\.|$)/g, "[#$1]").replace(/\[#/g, "[");
|
||||
const activeToken = ref("1");
|
||||
const list = ref([
|
||||
{
|
||||
token: "1",
|
||||
ifSingle: false,
|
||||
level2Type: "Pattern",
|
||||
designType: "Library",
|
||||
path: "/src/assets/images/canvas/yinhua1.jpg",
|
||||
location: [0, 0],
|
||||
scale: [1, 1],
|
||||
angle: 0,
|
||||
name: "Print1",
|
||||
priority: 1,
|
||||
object: {
|
||||
top: 0,
|
||||
left: 0,
|
||||
scaleX: 1,
|
||||
scaleY: 1,
|
||||
opacity: 1,
|
||||
angle: 0,
|
||||
flipX: false,
|
||||
flipY: false,
|
||||
blendMode: "multiply",
|
||||
gapX: 10,
|
||||
gapY: 20,
|
||||
},
|
||||
},
|
||||
{
|
||||
token: "2",
|
||||
ifSingle: false,
|
||||
level2Type: "Pattern",
|
||||
designType: "Library",
|
||||
path: "/src/assets/images/canvas/yinhua1.jpg",
|
||||
location: [0, 0],
|
||||
scale: [2, 2],
|
||||
angle: -45,
|
||||
name: "Print2",
|
||||
priority: 1,
|
||||
object: {
|
||||
top: 450,
|
||||
left: 300,
|
||||
scaleX: 0.5,
|
||||
scaleY: 0.5,
|
||||
opacity: 1,
|
||||
angle: 0,
|
||||
flipX: false,
|
||||
flipY: false,
|
||||
blendMode: "multiply",
|
||||
gapX: 0,
|
||||
gapY: 0,
|
||||
},
|
||||
},
|
||||
]);
|
||||
const list = ref([]);
|
||||
// 深拷贝
|
||||
const deepCopy = (obj) => JSON.parse(JSON.stringify(obj));
|
||||
const oldList = ref(deepCopy(list.value));
|
||||
|
||||
@@ -3,8 +3,11 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import TaskQueue from "../utils/TaskQueue.js";
|
||||
import { fabric } from "fabric-with-all";
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
import { ref, watch, onMounted, nextTick } from "vue";
|
||||
// 任务队列
|
||||
const taskQueue = new TaskQueue();
|
||||
const KEYS = {
|
||||
FILL_X: "location[0]",
|
||||
FILL_Y: "location[1]",
|
||||
@@ -32,45 +35,36 @@
|
||||
};
|
||||
const emit = defineEmits(["change-canvas", "init-canvas"]);
|
||||
const props = defineProps({
|
||||
list: { type: Array, default: () => [] },
|
||||
// list: { type: Array, default: () => [] },
|
||||
width: { type: Number, required: true },
|
||||
height: { type: Number, required: true },
|
||||
});
|
||||
const list = ref([]);
|
||||
const el = ref(null);
|
||||
const canvasRef = ref(null);
|
||||
const observer = ref(null);
|
||||
var canvas = null;
|
||||
onMounted(async () => {
|
||||
initCanvas();
|
||||
await setCanvasData();
|
||||
let throttleTimeout = null;
|
||||
let lastRunTime = 0;
|
||||
// taskQueue.addTask(async () => await setCanvasData());
|
||||
emit("init-canvas", list.value);
|
||||
let throttleDelay = 100;
|
||||
let trailingTimeout = null;
|
||||
observer.value = new ResizeObserver((entries) => {
|
||||
const now = Date.now();
|
||||
const throttleDelay = 100;
|
||||
if (!throttleTimeout) {
|
||||
updateCanvasSize();
|
||||
lastRunTime = now;
|
||||
throttleTimeout = setTimeout(() => {
|
||||
throttleTimeout = null;
|
||||
}, throttleDelay);
|
||||
} else {
|
||||
clearTimeout(trailingTimeout);
|
||||
trailingTimeout = setTimeout(() => {
|
||||
updateCanvasSize();
|
||||
lastRunTime = Date.now();
|
||||
}, throttleDelay);
|
||||
}
|
||||
clearTimeout(trailingTimeout);
|
||||
trailingTimeout = setTimeout(() => {
|
||||
console.log("OverallCanvas: resize");
|
||||
taskQueue.addTask(async () => await updateCanvasSize());
|
||||
}, throttleDelay);
|
||||
});
|
||||
observer.value.observe(el.value);
|
||||
emit("init-canvas", props.list);
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
observer.value.disconnect();
|
||||
unbindEvent();
|
||||
});
|
||||
const initCanvas = () => {
|
||||
console.log("OverallCanvas: initCanvas");
|
||||
canvas = new fabric.Canvas(canvasRef.value, {
|
||||
selection: false,
|
||||
preserveObjectStacking: true,
|
||||
@@ -80,6 +74,7 @@
|
||||
bindEvent();
|
||||
};
|
||||
const updateCanvasSize = async () => {
|
||||
console.log("OverallCanvas: updateCanvasSize");
|
||||
canvas.setWidth(el.value.offsetWidth);
|
||||
canvas.setHeight(el.value.offsetHeight);
|
||||
await setCanvasData();
|
||||
@@ -98,7 +93,7 @@
|
||||
};
|
||||
// 处理对象修改事件
|
||||
const onObjectModified = (e) => {
|
||||
console.log(e);
|
||||
console.log("OverallCanvas: onObjectModified", e);
|
||||
const object = e.target;
|
||||
const action = e.action;
|
||||
const list = [];
|
||||
@@ -174,8 +169,9 @@
|
||||
};
|
||||
const setCanvasData = async () => {
|
||||
canvas.clear();
|
||||
for (let i = 0; i < props.list.length; i++) {
|
||||
let item = props.list[i];
|
||||
console.log("OverallCanvas: setCanvasData", list.value);
|
||||
for (let i = 0; i < list.value.length; i++) {
|
||||
let item = list.value[i];
|
||||
await addObject(item);
|
||||
}
|
||||
canvas.renderAll();
|
||||
@@ -194,7 +190,6 @@
|
||||
left: item.object.left / (props.width / canvas.width),
|
||||
onDelete: (v) => onDeleteItem(v),
|
||||
});
|
||||
console.log("==========", props)
|
||||
canvas.add(rect);
|
||||
};
|
||||
const setFill = async (item) => {
|
||||
@@ -231,73 +226,88 @@
|
||||
});
|
||||
return pattern;
|
||||
};
|
||||
const updataList = async (list) => {
|
||||
console.log(list);
|
||||
const objects = canvas.getObjects();
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
let item = list[i];
|
||||
let object = objects.find((o) => o.token === item.token);
|
||||
if (item.action === ACTIONS.UPDATE) {
|
||||
if (!object) continue;
|
||||
let value = item.value;
|
||||
switch (item.key) {
|
||||
case KEYS.O_TOP:
|
||||
object.set("top", value / (props.height / canvas.height));
|
||||
break;
|
||||
case KEYS.O_LEFT:
|
||||
object.set("left", value / (props.width / canvas.width));
|
||||
break;
|
||||
case KEYS.O_OPACITY:
|
||||
object.set("opacity", value);
|
||||
break;
|
||||
case KEYS.O_SCALE_X:
|
||||
object.set("scaleX", value);
|
||||
break;
|
||||
case KEYS.O_SCALE_Y:
|
||||
object.set("scaleY", value);
|
||||
break;
|
||||
case KEYS.O_ANGLE:
|
||||
object.set("angle", value);
|
||||
break;
|
||||
case KEYS.O_FLIPX:
|
||||
object.set("flipX", value);
|
||||
break;
|
||||
case KEYS.O_FLIPY:
|
||||
object.set("flipY", value);
|
||||
break;
|
||||
case KEYS.O_BLENDMODE:
|
||||
object.set("blendMode", value);
|
||||
break;
|
||||
case KEYS.FILL_X:
|
||||
case KEYS.FILL_Y:
|
||||
case KEYS.FILL_ANGLE:
|
||||
case KEYS.FILL_SCALEX:
|
||||
case KEYS.FILL_SCALEY:
|
||||
case KEYS.FILL_GAPX:
|
||||
case KEYS.FILL_GAPY:
|
||||
let pattern = await setFill(
|
||||
props.list.find((v) => v.token === item.token)
|
||||
);
|
||||
object.set("fill", pattern);
|
||||
break;
|
||||
const updataList = async (list_) => {
|
||||
const cd = async (list_) => {
|
||||
console.log("OverallCanvas: updataList", list_);
|
||||
const objects = canvas.getObjects();
|
||||
for (let i = 0; i < list_.length; i++) {
|
||||
let item = list_[i];
|
||||
let object = objects.find((o) => o.token === item.token);
|
||||
if (item.action === ACTIONS.UPDATE) {
|
||||
if (!object) continue;
|
||||
let value = item.value;
|
||||
switch (item.key) {
|
||||
case KEYS.O_TOP:
|
||||
object.set(
|
||||
"top",
|
||||
value / (props.height / canvas.height)
|
||||
);
|
||||
break;
|
||||
case KEYS.O_LEFT:
|
||||
object.set(
|
||||
"left",
|
||||
value / (props.width / canvas.width)
|
||||
);
|
||||
break;
|
||||
case KEYS.O_OPACITY:
|
||||
object.set("opacity", value);
|
||||
break;
|
||||
case KEYS.O_SCALE_X:
|
||||
object.set("scaleX", value);
|
||||
break;
|
||||
case KEYS.O_SCALE_Y:
|
||||
object.set("scaleY", value);
|
||||
break;
|
||||
case KEYS.O_ANGLE:
|
||||
object.set("angle", value);
|
||||
break;
|
||||
case KEYS.O_FLIPX:
|
||||
object.set("flipX", value);
|
||||
break;
|
||||
case KEYS.O_FLIPY:
|
||||
object.set("flipY", value);
|
||||
break;
|
||||
case KEYS.O_BLENDMODE:
|
||||
object.set("blendMode", value);
|
||||
break;
|
||||
case KEYS.FILL_X:
|
||||
case KEYS.FILL_Y:
|
||||
case KEYS.FILL_ANGLE:
|
||||
case KEYS.FILL_SCALEX:
|
||||
case KEYS.FILL_SCALEY:
|
||||
case KEYS.FILL_GAPX:
|
||||
case KEYS.FILL_GAPY:
|
||||
let pattern = await setFill(
|
||||
list.value.find((v) => v.token === item.token)
|
||||
);
|
||||
object.set("fill", pattern);
|
||||
break;
|
||||
}
|
||||
} else if (item.action === ACTIONS.SELECT) {
|
||||
if (object) canvas.setActiveObject(object);
|
||||
} else if (item.action === ACTIONS.SORT) {
|
||||
let tokens = item.tokens;
|
||||
canvas.clear();
|
||||
const list_ = [];
|
||||
for (let j = 0; j < tokens.length; j++) {
|
||||
let item_ = list.value.find((v) => v.token === tokens[j]);
|
||||
if (item_) list_.push(item_);
|
||||
let object = objects.find((o) => o.token === tokens[j]);
|
||||
if (object) canvas.add(object);
|
||||
}
|
||||
list.value = list_;
|
||||
canvas.renderAll();
|
||||
} else if (item.action === ACTIONS.DELETE) {
|
||||
list.value = list.value.filter((v) => v.token !== item.token);
|
||||
if (object) canvas.remove(object);
|
||||
} else if (item.action === ACTIONS.ADD) {
|
||||
list.value.push(item.data);
|
||||
await addObject(item.data);
|
||||
}
|
||||
} else if (item.action === ACTIONS.SELECT) {
|
||||
if (object) canvas.setActiveObject(object);
|
||||
} else if (item.action === ACTIONS.SORT) {
|
||||
let tokens = item.tokens;
|
||||
canvas.clear();
|
||||
for (let j = 0; j < tokens.length; j++) {
|
||||
let object = objects.find((o) => o.token === tokens[j]);
|
||||
if (object) canvas.add(object);
|
||||
}
|
||||
canvas.renderAll();
|
||||
} else if (item.action === ACTIONS.DELETE) {
|
||||
if (object) canvas.remove(object);
|
||||
} else if (item.action === ACTIONS.ADD) {
|
||||
await addObject(item.data);
|
||||
}
|
||||
}
|
||||
canvas.renderAll();
|
||||
canvas.renderAll();
|
||||
};
|
||||
taskQueue.addTask(async () => await cd(list_));
|
||||
};
|
||||
defineExpose({
|
||||
updataList,
|
||||
|
||||
@@ -331,52 +331,55 @@
|
||||
class: "export-btn",
|
||||
},
|
||||
]);
|
||||
const otherData = {
|
||||
color: { rgba: { r: 255, g: 0, b: 0, a: 1 } },
|
||||
printObject: {
|
||||
prints: [
|
||||
{
|
||||
ifSingle: false,
|
||||
level2Type: "Pattern",
|
||||
designType: "Library",
|
||||
path: "/src/assets/images/canvas/yinhua1.jpg",
|
||||
location: [250, 780],
|
||||
scale: [1.2, 1.6],
|
||||
angle: 0,
|
||||
object: {
|
||||
top: 600,
|
||||
left: 800,
|
||||
scaleX: 0.5,
|
||||
scaleY: 0.5,
|
||||
opacity: 1,
|
||||
angle: 45,
|
||||
flipX: false,
|
||||
flipY: false,
|
||||
blendMode: "multiply",
|
||||
gapX: 0,
|
||||
gapY: 0,
|
||||
const canvasLoadJsonSuccess = () => {
|
||||
console.log("画布加载JSON成功");
|
||||
canvasEditor.value?.updateOtherLayers({
|
||||
color: { rgba: { r: 255, g: 0, b: 0, a: 1 } },
|
||||
printObject: {
|
||||
prints: [
|
||||
{
|
||||
ifSingle: false,
|
||||
level2Type: "Pattern",
|
||||
designType: "Library",
|
||||
path: "/src/assets/images/canvas/yinhua1.jpg",
|
||||
location: [250, 780],
|
||||
scale: [1.2, 1.6],
|
||||
angle: 0,
|
||||
object: {
|
||||
top: 600,
|
||||
left: 800,
|
||||
scaleX: 0.5,
|
||||
scaleY: 0.5,
|
||||
opacity: 1,
|
||||
angle: 45,
|
||||
flipX: false,
|
||||
flipY: false,
|
||||
blendMode: "multiply",
|
||||
gapX: 0,
|
||||
gapY: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
// {
|
||||
// ifSingle: true,
|
||||
// level2Type: "Pattern",
|
||||
// designType: "Library",
|
||||
// path: "/src/assets/images/canvas/yinhua1.jpg",
|
||||
// location: [550, 650],
|
||||
// scale: [0.15, 0.2],
|
||||
// angle: 0,
|
||||
// },
|
||||
// {
|
||||
// ifSingle: true,
|
||||
// level2Type: "Pattern",
|
||||
// designType: "Library",
|
||||
// path: "/src/assets/images/canvas/yinhua1.jpg",
|
||||
// location: [700, 400],
|
||||
// scale: [0.1, 0.133],
|
||||
// angle: 0,
|
||||
// },
|
||||
],
|
||||
},
|
||||
// {
|
||||
// ifSingle: true,
|
||||
// level2Type: "Pattern",
|
||||
// designType: "Library",
|
||||
// path: "/src/assets/images/canvas/yinhua1.jpg",
|
||||
// location: [550, 650],
|
||||
// scale: [0.15, 0.2],
|
||||
// angle: 0,
|
||||
// },
|
||||
// {
|
||||
// ifSingle: true,
|
||||
// level2Type: "Pattern",
|
||||
// designType: "Library",
|
||||
// path: "/src/assets/images/canvas/yinhua1.jpg",
|
||||
// location: [700, 400],
|
||||
// scale: [0.1, 0.133],
|
||||
// angle: 0,
|
||||
// },
|
||||
],
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -408,13 +411,13 @@
|
||||
:clothingMinIOPath="clothingMinIOPath"
|
||||
:clothingImageUrl="clothingImageUrl"
|
||||
:clothingImageUrl2="clothingImageUrlInit"
|
||||
:otherData="otherData"
|
||||
:config="editorConfig"
|
||||
:clothing-image-opts="{
|
||||
imageMode: 'contains', // 设置底图包含在画布内
|
||||
}"
|
||||
@change-canvas="changeCanvas"
|
||||
@canvas-init="canvasInit"
|
||||
@canvas-load-json-success="canvasLoadJsonSuccess"
|
||||
isFixedErasable
|
||||
showFixedLayer
|
||||
>
|
||||
|
||||
28
src/component/Canvas/utils/TaskQueue.js
Normal file
28
src/component/Canvas/utils/TaskQueue.js
Normal file
@@ -0,0 +1,28 @@
|
||||
export default class TaskQueue {
|
||||
constructor() {
|
||||
this.tasks = [];
|
||||
this.running = false;
|
||||
}
|
||||
// 添加任务
|
||||
addTask(task) {
|
||||
this.tasks.push(task);
|
||||
// 执行任务
|
||||
this.executeTasks();
|
||||
}
|
||||
// 执行任务
|
||||
async executeTasks() {
|
||||
if (this.running) {
|
||||
return;
|
||||
}
|
||||
this.running = true;
|
||||
for (const task of this.tasks) {
|
||||
await task();
|
||||
}
|
||||
this.running = false;
|
||||
this.clearTasks();
|
||||
}
|
||||
// 清空任务队列
|
||||
clearTasks() {
|
||||
this.tasks = [];
|
||||
}
|
||||
}
|
||||
@@ -189,8 +189,10 @@ export default defineComponent({
|
||||
}
|
||||
watch(()=>detailData.selectDetail,async (newValue,oldValue)=>{
|
||||
detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
|
||||
if(newValue)await getSketchSize()
|
||||
detailData.canvasKey += 1
|
||||
if(newValue?.path)await getSketchSize()
|
||||
if(newValue?.id && oldValue?.id && (newValue.id != oldValue.id)){
|
||||
detailData.canvasKey += 1
|
||||
}
|
||||
// privewDetail(oldValue)
|
||||
},{immediate: true})
|
||||
provide('getCanvasIfEdit',detailData.getCanvasIfEdit)
|
||||
@@ -329,14 +331,15 @@ export default defineComponent({
|
||||
}
|
||||
const setClothes = async (list:any,str:string)=>{
|
||||
let clothesList:any = []
|
||||
await nextTick()
|
||||
await uploadElement()
|
||||
if(detailData.isEditPattern.value == 'editSketch')await detailDom.canvasBox.submitBase64Data().then((rv)=>{
|
||||
detailData.selectDetail.sketchString = rv
|
||||
})
|
||||
if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
|
||||
await detailDom.canvasBox.privewDetail()
|
||||
for(let i = 0;i<list.length;i++){
|
||||
detailData.selectDetail
|
||||
let {scale,offset,priority,transpose,rotate,maskUrl,maskMinioUrl} = await (detailDom.model as any).getSubmitData(list[i])
|
||||
if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
|
||||
let gradient = null
|
||||
let newData = list[i]?.newDetail?.[detailData.currentDetailType]
|
||||
// newData[0].location=[
|
||||
@@ -395,9 +398,9 @@ export default defineComponent({
|
||||
trims:(newData && detailData.currentDetailType == 'element' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].trims?.prints?list[i].trims:{prints:[]},
|
||||
accessory:(newData && detailData.currentDetailType == 'accessory' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].trims?.prints?list[i].trims:{prints:[]},
|
||||
}
|
||||
if(!data.partialDesign.partialDesignMinioPath){
|
||||
data.partialDesign.partialDesignMinioPath = data.path
|
||||
}
|
||||
// if(!data.partialDesign.partialDesignMinioPath){
|
||||
// data.partialDesign.partialDesignMinioPath = data.path
|
||||
// }
|
||||
printObjectToJSON(data.printObject.prints)
|
||||
printObjectToJSON(data.trims.prints)
|
||||
if((detailData.isEditPattern.value && list[i].color?.gradient) || (!detailData.isEditPattern.value && (list[i].newDetail?.color?.gradient || list[i].color?.gradient))){
|
||||
@@ -613,7 +616,7 @@ export default defineComponent({
|
||||
if(color.r){
|
||||
color.rgba = {r:color.r,g:color.g,b:color.b,a:color.a}
|
||||
}else{
|
||||
color.rbga = {}
|
||||
color.rgba = {}
|
||||
}
|
||||
otherData.color = color
|
||||
}
|
||||
@@ -622,7 +625,7 @@ export default defineComponent({
|
||||
otherData.printObject = detailData.selectDetail.newDetail?.print?.length>0?{prints:detailData.selectDetail.newDetail?.print}:detailData.selectDetail.printObject || null
|
||||
}
|
||||
if(detailData.currentDetailType == 'element'){
|
||||
otherData.trims = detailData.selectDetail.newDetail?.element
|
||||
otherData.trims = detailData.selectDetail.newDetail?.element?.length>0?{prints:detailData.selectDetail.newDetail?.element}:detailData.selectDetail.trims || null
|
||||
}
|
||||
}
|
||||
console.log(JSON.parse(JSON.stringify(otherData)),'=======',JSON.parse(JSON.stringify(detailData.selectDetail)))
|
||||
@@ -632,7 +635,6 @@ export default defineComponent({
|
||||
if(detailData.isEditPattern.value == 'canvasEditor'){
|
||||
// await detailDom.canvasBox.saveCanvas()
|
||||
const allInfo = await (detailDom.canvasBox as any).getCanvasElement()
|
||||
console.log(allInfo,'allInfo')
|
||||
if(allInfo.trims?.length > 0){
|
||||
// detailData.selectDetail.trims.prints = allInfo.trims
|
||||
let value = {
|
||||
@@ -650,7 +652,7 @@ export default defineComponent({
|
||||
store.commit('DesignDetail/setNewDetail',value)
|
||||
}
|
||||
if(allInfo.color?.color?.rgba){
|
||||
let canvasColor = allInfo.color.color
|
||||
let canvasColor = allInfo.color.color;
|
||||
let colorData:any = await getColorName(allInfo.color.color?.rgba)
|
||||
let value:any = {
|
||||
data:{
|
||||
@@ -669,6 +671,7 @@ export default defineComponent({
|
||||
if(canvasColor.gradient){
|
||||
value.data.gradient = canvasColor.gradient
|
||||
}
|
||||
console.log(value,'=======')
|
||||
store.commit('DesignDetail/setNewDetail',value)
|
||||
if(allInfo.color.color.gradient)detailData.selectDetail.color.gradient = allInfo.color.color.gradient
|
||||
if(detailData.currentDetailType == 'color'){
|
||||
|
||||
@@ -6,10 +6,10 @@
|
||||
<div class="content-bottom" ref="canvasContent">
|
||||
<div class="contet">
|
||||
<div class="canvas" :class="{'active': currentView === 'canvasEditor'}"@click.stop>
|
||||
<!-- :clothingMinIOPath="selectDetail.minIOPath" 部件选取 -->
|
||||
<editCanvas v-if="canvasLoad" :config="canvasConfig"
|
||||
@canvasInit="editSketchCanvasInit"
|
||||
is-edit
|
||||
:clothingMinIOPath="selectDetail.minIOPath"
|
||||
:clothingImageUrl="selectDetail.path"
|
||||
:clothingImageUrl2="selectDetail.layersObject[0].maskUrl"
|
||||
showFixedLayer
|
||||
@@ -116,7 +116,7 @@ export default defineComponent({
|
||||
getCanvasIfEdit:inject('getCanvasIfEdit')as any,
|
||||
canvasInstance:null as any,
|
||||
canvasJSON:'',
|
||||
hideCanvas: computed(()=>store.state.Workspace.projectPath !== route.fullPath),
|
||||
hideCanvas: computed(()=>(store.state.Workspace.projectPath !== route.fullPath && props.isEditPattern)),
|
||||
otherData:computed(()=>({
|
||||
canvasId: store.state.DesignDetail.selectDetail.canvasId,
|
||||
color: store.state.DesignDetail.selectDetail.color,
|
||||
@@ -182,6 +182,7 @@ export default defineComponent({
|
||||
width:props.sketchSize.width,
|
||||
height:props.sketchSize.height,
|
||||
}).then((rv)=>{
|
||||
console.log(rv,'================')
|
||||
if(oldSelectDetail?.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = rv
|
||||
})
|
||||
//包含平铺图层 single+overall模式的图
|
||||
@@ -213,7 +214,6 @@ export default defineComponent({
|
||||
wH = [1,domHeight/imgHeight]
|
||||
// detailData.canvasConfig.width = img.width * wH[1]
|
||||
// detailData.canvasConfig.height = domHeight
|
||||
console.log(detailData.canvasConfig,'===============')
|
||||
detailData.canvasConfig.width = img.width
|
||||
detailData.canvasConfig.height = img.height
|
||||
|
||||
@@ -286,7 +286,7 @@ export default defineComponent({
|
||||
})
|
||||
|
||||
}
|
||||
const editSketchCanvasInit = (value:any)=>{
|
||||
const editSketchCanvasInit = async (value:any)=>{
|
||||
detailData.canvasInstance = value
|
||||
detailData.getCanvasIfEdit.fun = getCanvasLength
|
||||
detailData.isShowMark = false
|
||||
@@ -343,9 +343,8 @@ export default defineComponent({
|
||||
// }
|
||||
const canvasLoadJsonSuccess = async ()=>{
|
||||
let otherData = await props.updateOtherLayers()
|
||||
|
||||
await updateOtherLayers(otherData)
|
||||
await setUndivideLayer()
|
||||
setUndivideLayer()
|
||||
}
|
||||
const setUndivideLayer = async ()=>{
|
||||
await new Promise<void>(async (resolve, reject) => {
|
||||
@@ -369,7 +368,6 @@ export default defineComponent({
|
||||
width:props.sketchSize.width,
|
||||
height:props.sketchSize.height,
|
||||
}).then((rv)=>{
|
||||
console.log(rv,'======')
|
||||
detailData.selectDetail.undividedLayer = rv
|
||||
})
|
||||
// }
|
||||
@@ -402,26 +400,28 @@ export default defineComponent({
|
||||
const sessionCanvasList = sessionStorage.getItem('canvasList');
|
||||
const canvasList = sessionCanvasList ? JSON.parse(sessionCanvasList) : []
|
||||
let canvasIndex = canvasList.findIndex(item => item.id === detailData.selectDetail.id);
|
||||
if(canvasIndex>1){
|
||||
if(canvasIndex>-1){
|
||||
detailData.canvasJSON = canvasList[canvasIndex].canvasJSON
|
||||
}
|
||||
if(detailData.selectDetail.canvasId){
|
||||
detailData.isShowMark = true
|
||||
await new Promise((resolve, reject) => {
|
||||
let value = {
|
||||
module:'designItemDetail',
|
||||
id:detailData.selectDetail.canvasId,
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.exportSearch, value)
|
||||
.then((rv) => {
|
||||
detailData.canvasJSON = rv
|
||||
resolve('')
|
||||
}else{
|
||||
if(detailData.selectDetail.canvasId){
|
||||
detailData.isShowMark = true
|
||||
await new Promise((resolve, reject) => {
|
||||
let value = {
|
||||
module:'designItemDetail',
|
||||
id:detailData.selectDetail.canvasId,
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.exportSearch, value)
|
||||
.then((rv) => {
|
||||
detailData.canvasJSON = rv
|
||||
resolve('')
|
||||
})
|
||||
.catch((rv) => {
|
||||
resolve(null)
|
||||
});
|
||||
})
|
||||
.catch((rv) => {
|
||||
resolve(null)
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
setCanvas(detailData.selectDetail.path).then(()=>{
|
||||
detailData.canvasLoad = true
|
||||
})
|
||||
|
||||
@@ -124,11 +124,13 @@ export default defineComponent({
|
||||
})
|
||||
watch(()=>colorData.selectDetail.id,(newVal,oldVal)=>{
|
||||
if(!newVal)return
|
||||
console.log(12312)
|
||||
if(!colorData.colorList?.list?.[newVal]){
|
||||
colorData.colorList.list[newVal] = []
|
||||
}else{
|
||||
return
|
||||
}
|
||||
console.log(12312)
|
||||
let isNoSelect = false
|
||||
let pushIndex = 0
|
||||
for (let index = 0; index < 9; index++) {
|
||||
@@ -142,9 +144,10 @@ export default defineComponent({
|
||||
colorData.selectDetail.color.rgba?.r == color?.rgba?.r &&
|
||||
colorData.selectDetail.color.rgba?.g == color?.rgba?.g &&
|
||||
colorData.selectDetail.color.rgba?.b == color?.rgba?.b ||
|
||||
(JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(color?.gradient) && JSON.stringify(colorData.selectDetail.color.gradient))
|
||||
(JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(color?.gradient) && colorData.selectDetail.color.gradient)
|
||||
&& colorData.selectDetail.color.rgba?.r
|
||||
){
|
||||
console.log(123)
|
||||
isNoSelect = true
|
||||
colorData.selectColor = item
|
||||
colorData.colorList.index = index
|
||||
@@ -170,20 +173,21 @@ export default defineComponent({
|
||||
colorData.colorList.list[newVal].push(item)
|
||||
}
|
||||
if(!isNoSelect){
|
||||
if(!colorData.selectDetail.color?.rgba?.r)return
|
||||
let color = colorData.selectDetail.newDetail?.color?.rgba?.r?colorData.selectDetail.newDetail?.color:colorData.selectDetail.color
|
||||
if(!color?.rgba?.r)return
|
||||
let item = {
|
||||
hex:rgbaToHex([colorData.selectDetail.color.rgba.r,colorData.selectDetail.color.rgba.g,colorData.selectDetail.color.rgba.b]),
|
||||
id:colorData.selectDetail.color.id,
|
||||
hex:rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b]),
|
||||
id:color.id,
|
||||
rgba:{
|
||||
r:colorData.selectDetail.color.rgba.r,
|
||||
g:colorData.selectDetail.color.rgba.g,
|
||||
b:colorData.selectDetail.color.rgba.b,
|
||||
r:color.rgba.r,
|
||||
g:color.rgba.g,
|
||||
b:color.rgba.b,
|
||||
},
|
||||
tcx:colorData.selectDetail.color.tcx,
|
||||
name:colorData.selectDetail.color.name,
|
||||
tcx:color.tcx,
|
||||
name:color.name,
|
||||
} as any
|
||||
if(colorData.selectDetail.color.gradient){
|
||||
item.gradient = colorData.selectDetail.color.gradient
|
||||
if(color.gradient){
|
||||
item.gradient = color.gradient
|
||||
}
|
||||
colorData.selectColor = item
|
||||
let num = pushIndex
|
||||
|
||||
@@ -110,7 +110,7 @@
|
||||
</ul> -->
|
||||
</div>
|
||||
<div class="designOpenrtion_pingpu" v-else>
|
||||
<pingpu :list="printStyleList[type].overall" :width="sketchSize.width" :height="sketchSize.height" ref="pingpuRef" @change-canvas="updateCanvas"></pingpu>
|
||||
<pingpu :width="sketchSize.width" :height="sketchSize.height" ref="pingpuRef" @change-canvas="updateCanvas"></pingpu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -207,10 +207,10 @@ export default defineComponent({
|
||||
elList:[] as any,
|
||||
selectIndex:0,
|
||||
})
|
||||
|
||||
const setOveralSingle = ()=>{
|
||||
watch
|
||||
const setOveralSingle = async ()=>{
|
||||
|
||||
setItemPosition()
|
||||
await setItemPosition()
|
||||
}
|
||||
const formatter = (value:any)=>{
|
||||
return `${value}%`;
|
||||
@@ -373,6 +373,9 @@ export default defineComponent({
|
||||
gapX: 0,
|
||||
gapY: 0,
|
||||
}
|
||||
if(props.type == 'element'){
|
||||
item.object.blendMode = 'source-over'
|
||||
}
|
||||
}
|
||||
if(item.ifSingle){
|
||||
editPrintElementData.printStyleList[props.type].single.push(item)
|
||||
@@ -416,6 +419,8 @@ export default defineComponent({
|
||||
arr = editPrintElementData.selectDetail.newDetail[editPrintElementData.currentDetailType]
|
||||
}
|
||||
if(arr && arr.length > 0){
|
||||
editPrintElementData.printStyleList[props.type].single = []
|
||||
editPrintElementData.printStyleList[props.type].overall = []
|
||||
arr.forEach((item:any)=>{
|
||||
if(!item.ifSingle){
|
||||
editPrintElementData.stateOverallSingle = 'overall',
|
||||
@@ -467,8 +472,10 @@ export default defineComponent({
|
||||
if(arr.length > 0){
|
||||
editPrintElementData.imgDomIndex = 0
|
||||
if(newVal == 'overall'){
|
||||
editPrintElementData.printStyleList[props.type].single = []
|
||||
editPrintElementData.printStyleList[props.type].overall = []
|
||||
arr.forEach((item:any,index:number) => {
|
||||
item.id_ = index
|
||||
getItemPosition(item)
|
||||
});
|
||||
}
|
||||
}else{
|
||||
@@ -872,6 +879,8 @@ export default defineComponent({
|
||||
}
|
||||
} else if (item.action === ACTIONS.SELECT) {
|
||||
overallSetIndex(obj)
|
||||
} else if(item.action === ACTIONS.DELETE){
|
||||
navDelete(obj)
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -1152,7 +1161,7 @@ export default defineComponent({
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
&.active{
|
||||
border: 2px solid #B4B4B4;
|
||||
border: 2.5px solid #B4B4B4;
|
||||
}
|
||||
> img{
|
||||
width: 100%;
|
||||
@@ -1222,7 +1231,7 @@ export default defineComponent({
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.designOpenrtion_sketch_mask{
|
||||
|
||||
@@ -79,7 +79,7 @@ export default defineComponent({
|
||||
detailData.selectDetail?.id &&
|
||||
detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0
|
||||
){
|
||||
resolve()
|
||||
resolve(true)
|
||||
// Modal.confirm({
|
||||
// title: t('collectionModal.jsContent6'),
|
||||
// icon: createVNode(ExclamationCircleOutlined),
|
||||
|
||||
@@ -111,7 +111,7 @@ export default defineComponent({
|
||||
type: 'personal',
|
||||
info: '您的AI时尚设计助手',
|
||||
price: 'HK$0',
|
||||
detail: '自注册之日起 7 天内 · 50 个积分',
|
||||
detail: '自注册之日起 5 天内 · 50 个积分',
|
||||
highlight: '',
|
||||
discounts: '9折优惠',
|
||||
detailList: [
|
||||
@@ -190,7 +190,7 @@ export default defineComponent({
|
||||
type: 'personal',
|
||||
info: '您的AI时尚设计助手',
|
||||
price: 'HK$0',
|
||||
detail: '自注册之日起 7 天内 · 50 个积分',
|
||||
detail: '自注册之日起 5 天内 · 50 个积分',
|
||||
highlight: '',
|
||||
discounts: '9折优惠',
|
||||
detailList: [
|
||||
@@ -255,7 +255,7 @@ export default defineComponent({
|
||||
type: 'personal',
|
||||
info: 'Your AI Fashion Design Assistant',
|
||||
price: 'HK$0',
|
||||
detail: '7 days from sign-up · 50 credits',
|
||||
detail: '5 days from sign-up · 50 credits',
|
||||
highlight: '',
|
||||
discounts: '10% off',
|
||||
detailList: [
|
||||
@@ -334,7 +334,7 @@ export default defineComponent({
|
||||
type: 'personal',
|
||||
info: 'Your AI Fashion Design Assistant',
|
||||
price: 'HK$0',
|
||||
detail: '7 days from sign-up · 50 credits',
|
||||
detail: '5 days from sign-up · 50 credits',
|
||||
highlight: '',
|
||||
discounts: '10% off',
|
||||
detailList: [
|
||||
|
||||
Reference in New Issue
Block a user