aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

导出图片添加印花平铺判断

Browse Source
This commit is contained in:
李志鹏
2026-01-14 11:26:51 +08:00
parent d75e956fbf
commit dbe4557dc3
12 changed files with 523 additions and 887 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/component/Canvas/CanvasEditor/commands/LayerCommands.js
View File

@@ -872,13 +872,13 @@ export class ToggleChildLayerVisibilityCommand extends Command {
// this.oldVisibility = this.childLayer ? this.childLayer.visible : null;
}
async execute() {
async execute(visible) {
if (!this.childLayer) {
throw new Error("找不到要切换可见性的子图层");
}
// 切换可见性
this.childLayer.visible = !this.childLayer.visible;
this.childLayer.visible = typeof visible === "boolean" ? visible : !this.childLayer.visible;
// 更新画布上图层对象的可见性
if (this.canvas) {

6
src/component/Canvas/CanvasEditor/components/LayersPanel/LayersList.vue
View File

@@ -287,7 +287,7 @@ const canDeleteComputed = computed(() => {
:is-child="isChild"
:is-active="layer.id === activeLayerId"
:is-selected="isLayerSelected(layer.id)"
:is-multi-select-mode="isMultiSelectMode && !layer.specialType"
:is-multi-select-mode="isMultiSelectMode && !(layer.isPrintTrims || layer.isPrintTrimsGroup)"
:is-editing="editingLayerId === layer.id"
:editing-name="editingLayerName"
:can-delete="
@@ -296,7 +296,7 @@ const canDeleteComputed = computed(() => {
:expanded-group-ids="expandedGroupIds"
@click="(...args) => forwardEvent('layer-click', ...args)"
@double-click="(...args) => forwardEvent('layer-double-click', ...args)"
@context-menu="(...args) => !layer.specialType && forwardEvent('context-menu', ...args)"
@context-menu="(...args) => !(layer.isPrintTrims || layer.isPrintTrimsGroup) && forwardEvent('context-menu', ...args)"
@checkbox-change="(...args) => forwardEvent('checkbox-change', ...args)"
@toggle-visibility="(...args) => forwardEvent('toggle-visibility', ...args)"
@toggle-lock="(...args) => forwardEvent('toggle-lock', ...args)"
@@ -337,7 +337,7 @@ const canDeleteComputed = computed(() => {
:expanded-group-ids="expandedGroupIds"
:isChild="true"
:parentLayerId="layer.id"
:group-name="layer.specialType || groupName"
:group-name="groupName"
@layer-click="(...args) => forwardEvent('layer-click', ...args)"
@layer-double-click="(...args) => forwardEvent('layer-double-click', ...args)"
@context-menu="(...args) => forwardEvent('context-menu', ...args)"

2
src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue
View File

@@ -1242,7 +1242,7 @@ async function handleCrossLevelMove(moveData) {
try {
const layer = findLayerRecursively(layers.value, layerId).layer;
const toLayer = findLayerRecursively(layers.value, toParentId).layer;
if(layer?.specialType || toLayer?.specialType) {
if(layer?.isPrintTrims || layer?.isPrintTrimsGroup || toLayer?.isPrintTrims || toLayer?.isPrintTrimsGroup) {
console.warn("当前图层不可移动到外部");
return;
}

1187
src/component/Canvas/CanvasEditor/components/PartSelectorPanel.vue
View File

File diff suppressed because it is too large Load Diff

11
src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue
View File

@@ -178,11 +178,7 @@
import { ref, onMounted, watch, onUnmounted, reactive } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import {
OperationType,
SpecialLayerId,
SpecialType,
} from "../../utils/layerHelper";
import { OperationType, SpecialLayerId } from "../../utils/layerHelper";
import { loadImageUrlToLayer } from "../../utils/imageHelper";
import {
calculateRotatedTopLeftDeg,
@@ -283,9 +279,6 @@
const getActiveObject = (e) => {
console.log("==========切换激活对象", e, activeObjects);
activeObjects.value = [...e.selected];
// .filter((v) =>
// v.specialType ? v.specialType === SpecialType.REPEAT_O : true
// );// 过滤出印花对象
activeObjects.value.forEach((v) => {
v.layer = props.layerManager.getLayerById(v.layerId);
});
@@ -783,7 +776,7 @@
}
> .list {
display: flex;
> div {
display: flex;
align-items: center;

26
src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue
View File

@@ -166,19 +166,19 @@ const normalToolsList = ref([
icon: { name: "CFont", size: "20" },
class: "text-btn",
},
{
id: OperationType.PART,
title: t("Canvas.GarmentPartSelector"),
action: () => selectTool(OperationType.PART),
icon: { name: "CPart", size: "28" },
class: "part-btn",
activeList: [
OperationType.PART,
OperationType.PART_RECTANGLE,
OperationType.PART_BRUSH,
OperationType.PART_ERASER,
],
},
// {
// id: OperationType.PART,
// title: t("Canvas.GarmentPartSelector"),
// action: () => selectTool(OperationType.PART),
// icon: { name: "CPart", size: "28" },
// class: "part-btn",
// activeList: [
// OperationType.PART,
// OperationType.PART_RECTANGLE,
// OperationType.PART_BRUSH,
// OperationType.PART_ERASER,
// ],
// },
{
id: "help",
title: t("Canvas.help"),

45
src/component/Canvas/CanvasEditor/index.vue
View File

@@ -1000,6 +1000,8 @@ defineExpose({
isContainBg = false, // 是否包含背景图层
isContainFixed = false, // 是否包含固定图层
isContainFixedOther = false, // 是否包含其他固定图层
isPrintTrimsNoRepeat = true, // 是否包含印花图层的不平铺
isPrintTrimsRepeat = true, // 是否包含印花图层的平铺
isCropByBg = false, // 是否使用背景大小裁剪 // 如果为true，则导出时裁剪到背景图层大小
layerId = "", // 导出具体图层ID
layerIdArray = [], // 导出多个图层ID数组
@@ -1010,6 +1012,8 @@ defineExpose({
isContainBg,
isContainFixed,
isContainFixedOther,
isPrintTrimsNoRepeat,
isPrintTrimsRepeat,
isCropByBg,
layerId,
layerIdArray,
@@ -1250,7 +1254,7 @@ defineExpose({
/>
<!-- 部件选取面板 -->
<PartSelectorPanel
<!-- <PartSelectorPanel
v-if="canvasManagerLoaded && !enabledRedGreenMode"
:canvas="canvasManager && canvasManager.canvas"
:commandManager="commandManager"
@@ -1259,7 +1263,7 @@ defineExpose({
:canvasManager="canvasManager"
:toolManager="toolManager"
:activeTool="activeTool"
/>
/> -->
<!-- 文本编辑面板 -->
<TextEditorPanel
@@ -1414,6 +1418,7 @@ defineExpose({
/* background-color: #f8f8f8; */
:deep(.canvas-container) {
position: absolute !important;
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}
}
@@ -1426,33 +1431,31 @@ defineExpose({
}
.background-grid {
--offsetX: 0px;
--offsetY: 0px;
--size: 8px;
--color: #dedcdc;
--offsetX: 50%;
--offsetY: 50%;
--size: 10px;
--color: rgba(229, 229,229,0.5);
background-image: -webkit-linear-gradient(
45deg,
var(--color) 25%,
90deg,
var(--color) 1px,
transparent 0,
transparent 75%,
var(--color) 0
),
-webkit-linear-gradient(45deg, var(--color) 25%, transparent 0, transparent
75%, var(--color) 0);
background-image: linear-gradient(
45deg,
var(--color) 25%,
-webkit-linear-gradient(
0,
var(--color) 1px,
transparent 0,
);
background-image:linear-gradient(
90deg,
var(--color) 1px,
transparent 0,
transparent 75%,
var(--color) 0
),
linear-gradient(
45deg,
var(--color) 25%,
0,
var(--color) 1px,
transparent 0,
transparent 75%,
var(--color) 0
);
background-color: #fafafa;
background-position: var(--offsetX) var(--offsetY),
calc(var(--size) + var(--offsetX)) calc(var(--size) + var(--offsetY));
background-size: calc(var(--size) * 2) calc(var(--size) * 2);

65
src/component/Canvas/CanvasEditor/managers/CanvasManager.js
View File

@@ -13,7 +13,6 @@ import {
createLayer,
LayerType,
SpecialLayerId,
SpecialType,
BlendMode,
} from "../utils/layerHelper";
import { ObjectMoveCommand } from "../commands/ObjectCommands";
@@ -45,7 +44,7 @@ import {
} from "../utils/layerUtils";
import { imageModeHandler } from "../utils/imageHelper";
import { getObjectAlphaToCanvas } from "../utils/objectHelper";
import { AddLayerCommand, RemoveLayerCommand } from "../commands/LayerCommands";
import { AddLayerCommand, RemoveLayerCommand, ToggleChildLayerVisibilityCommand } from "../commands/LayerCommands";
import { fa, id } from "element-plus/es/locales.mjs";
import i18n from "@/lang/index.ts";
const {t} = i18n.global;
@@ -717,6 +716,8 @@ export class CanvasManager {
originX: backgroundLayerObject.originX || "left",
originY: backgroundLayerObject.originY || "top",
absolutePositioned: true,
rx: 15,
ry: 15,
});
}
getBackgroundLayer() {
@@ -827,7 +828,7 @@ export class CanvasManager {
updateMaskPosition(backgroundLayerObject) {
if (!backgroundLayerObject || !this.maskLayer || !this.canvas.clipPath)
return;
console.log("backgroundLayerObject");
const left = backgroundLayerObject.left;
const top = backgroundLayerObject.top;
@@ -922,6 +923,8 @@ export class CanvasManager {
* @param {Boolean} options.isContainBg 是否包含背景图层
* @param {Boolean} options.isContainFixed 是否包含固定图层
* @param {Boolean} options.isContainFixedOther 是否包含其他固定图层
* @param {Boolean} options.isPrintTrimsNoRepeat 是否包含印花图层的不平铺
* @param {Boolean} options.isPrintTrimsRepeat 是否包含印花图层的平铺
* @param {String} options.layerId 导出具体图层ID
* @param {Array} options.layerIdArray 导出多个图层ID数组
* @param {String} options.expPicType 导出图片类型 (png/jpg/svg)
@@ -942,6 +945,8 @@ export class CanvasManager {
// this.canvas.renderAll(); // 重新渲染画布
// 自动设置红绿图模式相关参数
const enhancedOptions = {
isPrintTrimsNoRepeat: true,
isPrintTrimsRepeat: true,
...options,
// 如果没有明确指定，则根据当前模式自动设置
restoreOpacityInRedGreen:
@@ -972,7 +977,46 @@ export class CanvasManager {
console.log("红绿图模式导出图层:", normalLayerIds);
}
}
return await this.exportManager.exportImage(enhancedOptions);
// 处理特殊图层的显示状态
const ptlids = [];
if(!enhancedOptions.isPrintTrimsNoRepeat || !enhancedOptions.isPrintTrimsRepeat){
let layers = this.layers?.value?.find((layer) => layer.isPrintTrimsGroup)?.children || [];
for(let layer of layers){
if(!layer.visible) continue;
let repeat = layer.fabricObjects?.[0]?.fill?.repeat || "no-repeat";
if(typeof repeat !== "string") repeat = "no-repeat";
if(repeat === "no-repeat"){
if(enhancedOptions.isPrintTrimsNoRepeat) continue;
}else{
if(enhancedOptions.isPrintTrimsRepeat) continue;
}
ptlids.push(layer.id);
const command = new ToggleChildLayerVisibilityCommand({
canvas: this.canvas,
layers: this.layers,
layerId: layer.id,
layerManager: this.layerManager,
});
await command.execute(false);
}
await this.changeCanvas();
}
const res = await this.exportManager.exportImage(enhancedOptions);
// 恢复特殊图层的显示状态
if(ptlids.length > 0){
for(let id of ptlids){
const command = new ToggleChildLayerVisibilityCommand({
canvas: this.canvas,
layers: this.layers,
layerId: id,
layerManager: this.layerManager,
});
await command.execute(true);
}
await this.changeCanvas();
}
return res;
} catch (error) {
console.warn("CanvasManager导出图片失败:", error);
throw error;
@@ -1533,7 +1577,7 @@ export class CanvasManager {
selectable: true,
hasControls: true,
hasBorders: true,
specialType: SpecialType.PRINT_TRIMS_O,
isPrintTrims: true,
globalCompositeOperation: BlendMode.MULTIPLY,
});
resolve(fabricImage);
@@ -1547,7 +1591,7 @@ export class CanvasManager {
visible: true,
locked: false,
opacity: 1.0,
specialType: SpecialType.PRINT_TRIMS_L,
isPrintTrims: true,
blendMode: BlendMode.MULTIPLY,
fabricObjects: [image.toObject(["id", "layerId", "layerName"])],
metadata: {sourceData: item},
@@ -1601,7 +1645,7 @@ export class CanvasManager {
width: image.width,
height: image.height,
},
specialType: SpecialType.REPEAT_O,
isPrintTrims: true,
});
this.canvas.add(rect);
let layer = createLayer({
@@ -1611,7 +1655,7 @@ export class CanvasManager {
visible: true,
locked: true,
opacity: 1,
specialType: SpecialType.REPEAT_L,
isPrintTrims: true,
blendMode: BlendMode.MULTIPLY,
fabricObjects: [rect.toObject(["id", "layerId", "layerName"])],
metadata: {sourceData: item},
@@ -1630,7 +1674,7 @@ export class CanvasManager {
// })
// children.push(layer);
// }
// if(children.length === 0) return;
if(children.length === 0) return;
const groupRect = new fabric.Rect({});
await this.setObjecCliptInfo(groupRect);
// 插入组图层
@@ -1646,11 +1690,8 @@ export class CanvasManager {
children: children,
clippingMask: groupRect.toObject(),
isPrintTrimsGroup: true,
specialType: SpecialType.PRINT_TRIMS_G,
});
this.layers.value.splice(groupIndex, 0, groupLayer);
console.log("==========layers", [...this.layers.value]);
}
/**

3
src/component/Canvas/CanvasEditor/managers/ToolManager.js
View File

@@ -502,7 +502,6 @@ export class ToolManager {
if (!this.canvas) return;
this.canvas.isDrawingMode = false;
this.canvas.selection = true;
}
/**
@@ -511,7 +510,7 @@ export class ToolManager {
*/
checkToolCanOperateSelectedObject() {
const layer = this.layerManager?.getActiveLayer();
const isSpecialLayer = !!layer?.specialType;
const isSpecialLayer = !!layer?.isPrintTrims || !!layer?.isPrintTrimsGroup;
if (isSpecialLayer) {
this._disableBrushIndicator();
this.canvas.defaultCursor = "not-allowed";

12
src/component/Canvas/CanvasEditor/utils/layerHelper.js
View File

@@ -25,18 +25,6 @@ export const SpecialLayerId = {
SPECIAL_GROUP: "group_special", // 特殊组
COLOR: "special_color", // 颜色图层
}
/**
* 特殊类型
*/
export const SpecialType = {
PRINT_TRIMS_G: "print_trims_group", // 印花和元素图层组
PRINT_TRIMS_L: "print_trims_layer", // 印花和元素图层
PRINT_TRIMS_O: "print_trims_object", // 印花和元素图层对象
REPEAT_L: "repeat_layer",// 平铺图层
REPEAT_O: "repeat_object",// 平铺图层对象
}
/**

18
src/component/Canvas/canvasExample.vue
View File

@@ -335,20 +335,20 @@ 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: [0.3, 0.4],
// angle: 0,
// },
{
ifSingle: false,
level2Type: "Pattern",
designType: "Library",
path: "/src/assets/images/canvas/yinhua1.jpg",
location: [250, 780],
scale: [0.3, 0.4],
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,