diff --git a/src/component/Canvas/CanvasEditor/index.vue b/src/component/Canvas/CanvasEditor/index.vue index a5b371eb..5f7796fc 100644 --- a/src/component/Canvas/CanvasEditor/index.vue +++ b/src/component/Canvas/CanvasEditor/index.vue @@ -1018,9 +1018,10 @@ defineExpose({ exportImage: ({ isContainBg = false, // 是否包含背景图层 isContainFixed = false, // 是否包含固定图层 - isContainFixedOther = false, // 是否包含其他固定图层 + isContainFixedOther = true, // 是否包含其他固定图层--颜色图层 isPrintTrimsNoRepeat = true, // 是否包含印花图层的不平铺 isPrintTrimsRepeat = true, // 是否包含印花图层的平铺 + isContainNormalLayer = true, // 是否包含普通图层 isCropByBg = false, // 是否使用背景大小裁剪 // 如果为true，则导出时裁剪到背景图层大小 layerId = "", // 导出具体图层ID layerIdArray = [], // 导出多个图层ID数组 @@ -1033,6 +1034,7 @@ defineExpose({ isContainFixedOther, isPrintTrimsNoRepeat, isPrintTrimsRepeat, + isContainNormalLayer, isCropByBg, layerId, layerIdArray, diff --git a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js index 1ef453d9..b97b3bb6 100644 --- a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js +++ b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js @@ -938,6 +938,7 @@ export class CanvasManager { * @param {Boolean} options.isContainFixedOther 是否包含其他固定图层 * @param {Boolean} options.isPrintTrimsNoRepeat 是否包含印花图层的不平铺 * @param {Boolean} options.isPrintTrimsRepeat 是否包含印花图层的平铺 + * @param {Boolean} options.isContainNormalLayer 是否包含普通图层 * @param {String} options.layerId 导出具体图层ID * @param {Array} options.layerIdArray 导出多个图层ID数组 * @param {String} options.expPicType 导出图片类型 (png/jpg/svg) @@ -960,6 +961,7 @@ export class CanvasManager { const enhancedOptions = { isPrintTrimsNoRepeat: true, isPrintTrimsRepeat: true, + isContainNormalLayer: true, ...options, // 如果没有明确指定，则根据当前模式自动设置 restoreOpacityInRedGreen: diff --git a/src/component/Canvas/CanvasEditor/managers/ExportManager.js b/src/component/Canvas/CanvasEditor/managers/ExportManager.js index bbcb5321..f3777452 100644 --- a/src/component/Canvas/CanvasEditor/managers/ExportManager.js +++ b/src/component/Canvas/CanvasEditor/managers/ExportManager.js @@ -20,6 +20,7 @@ export class ExportManager { * @param {Boolean} options.isContainBg 是否包含背景图层 * @param {Boolean} options.isContainFixed 是否包含固定图层 * @param {Boolean} options.isContainFixedOther 是否包含其他固定图层 + * @param {Boolean} options.isContainNormalLayer 是否包含普通图层 * @param {Boolean} options.isCropByBg 是否使用背景大小裁剪 * @param {String} options.layerId 导出具体图层ID * @param {Array} options.layerIdArray 导出多个图层ID数组 @@ -35,6 +36,7 @@ export class ExportManager { isContainBg = false, isContainFixed = false, isContainFixedOther = false, // 是否包含其他固定图层 + isContainNormalLayer = true, // 是否包含普通图层 isCropByBg = false, // 是否使用背景大小裁剪 layerId = "", layerIdArray = [], @@ -68,6 +70,7 @@ export class ExportManager { isContainBg, isContainFixed, isContainFixedOther, // 是否包含其他固定图层 + isContainNormalLayer, // 是否包含普通图层 isRedGreenMode, restoreOpacityInRedGreen, isCropByBg, @@ -81,6 +84,7 @@ export class ExportManager { isContainBg, isContainFixed, isContainFixedOther, // 是否包含其他固定图层 + isContainNormalLayer, // 是否包含普通图层 isRedGreenMode, restoreOpacityInRedGreen, isCropByBg, @@ -160,6 +164,7 @@ export class ExportManager { * @param {Boolean} isContainBg 是否包含背景图层 * @param {Boolean} isContainFixed 是否包含固定图层 * @param {Boolean} isContainFixedOther 是否包含其他固定图层 + * @param {Boolean} isContainNormalLayer 是否包含普通图层 * @param {Boolean} isRedGreenMode 是否为红绿图模式 * @param {Boolean} restoreOpacityInRedGreen 红绿图模式下是否恢复透明度为1 * @param {Boolean} isCropByBg 是否使用背景大小裁剪 @@ -173,6 +178,7 @@ export class ExportManager { isContainBg, isContainFixed, isContainFixedOther, // 是否包含其他固定图层 + isContainNormalLayer = true, // 是否包含普通图层 isRedGreenMode, restoreOpacityInRedGreen, isCropByBg, // 是否使用背景大小裁剪 @@ -188,6 +194,7 @@ export class ExportManager { isContainBg, isContainFixed, isContainFixedOther, // 是否包含其他固定图层 + isContainNormalLayer, // 是否包含普通图层 ); if (objectsToExport.length === 0) { @@ -220,6 +227,7 @@ export class ExportManager { * @param {Boolean} isContainBg 是否包含背景图层 * @param {Boolean} isContainFixed 是否包含固定图层 * @param {Boolean} isContainFixedOther 是否包含其他固定图层 + * @param {Boolean} isContainNormalLayer 是否包含普通图层 * @param {Boolean} isRedGreenMode 是否为红绿图模式 * @param {Boolean} restoreOpacityInRedGreen 红绿图模式下是否恢复透明度为1 * @param {Boolean} isCropByBg 是否使用背景大小裁剪 @@ -233,6 +241,7 @@ export class ExportManager { isContainBg, isContainFixed, isContainFixedOther, // 是否包含其他固定图层 + isContainNormalLayer, // 是否包含普通图层 isRedGreenMode, restoreOpacityInRedGreen, isCropByBg, // 是否使用背景大小裁剪 @@ -246,6 +255,7 @@ export class ExportManager { isContainBg, isContainFixed, isContainFixedOther, // 是否包含其他固定图层 + isContainNormalLayer, // 是否包含普通图层 excludedLayers, ); @@ -405,11 +415,12 @@ export class ExportManager { * @param {Boolean} isContainBg 是否包含背景图层 * @param {Boolean} isContainFixed 是否包含固定图层 * @param {Boolean} isContainFixedOther 是否包含其他固定图层 + * @param {Boolean} isContainNormalLayer 是否包含普通图层 * @param {Array} excludedLayers 排除的图层ID数组 * @returns {Array} 按正确顺序排列的真实对象数组 * @private */ - _collectObjectsByLayerOrder(layerIdArray, isContainBg, isContainFixed, isContainFixedOther, excludedLayers) { + _collectObjectsByLayerOrder(layerIdArray, isContainBg, isContainFixed, isContainFixedOther, isContainNormalLayer, excludedLayers) { const objectsToExport = []; const allLayers = this._getAllLayersFlattened(excludedLayers); // 获取扁平化的图层列表 @@ -421,7 +432,7 @@ export class ExportManager { if (layerIdArray && !layerIdArray.includes(layer.id)) continue; // 检查图层类型过滤条件 - if (!this._shouldIncludeLayer(layer, isContainBg, isContainFixed, isContainFixedOther)) + if (!this._shouldIncludeLayer(layer, isContainBg, isContainFixed, isContainFixedOther, isContainNormalLayer)) continue; if (layer.visible) { @@ -1040,10 +1051,11 @@ export class ExportManager { * @param {Boolean} isContainBg 是否包含背景图层 * @param {Boolean} isContainFixed 是否包含固定图层 * @param {Boolean} isContainFixedOther 是否包含其他固定图层 + * @param {Boolean} isContainNormalLayer 是否包含普通图层 * @returns {Boolean} 是否应该包含 * @private */ - _shouldIncludeLayer(layer, isContainBg, isContainFixed, isContainFixedOther) { + _shouldIncludeLayer(layer, isContainBg, isContainFixed, isContainFixedOther, isContainNormalLayer) { if (!layer) return false; // 检查背景图层 @@ -1061,7 +1073,12 @@ export class ExportManager { return isContainFixedOther; } - // 普通图层总是包含 - return true; + // 印花图层始终导出 + if (layer.isPrintTrims || layer.isPrintTrimsGroup) { + return true; + } + + // 普通图层 + return isContainNormalLayer; } } diff --git a/src/component/Canvas/OverallCanvas/index.vue b/src/component/Canvas/OverallCanvas/index.vue index 2feedef1..fdb25bb3 100644 --- a/src/component/Canvas/OverallCanvas/index.vue +++ b/src/component/Canvas/OverallCanvas/index.vue @@ -30,7 +30,7 @@ DELETE: "delete", SORT: "sort", }; - const emit = defineEmits(["change-canvas"]); + const emit = defineEmits(["change-canvas", "init-canvas"]); const props = defineProps({ list: { type: Array, default: () => [] }, }); @@ -41,7 +41,6 @@ onMounted(async () => { initCanvas(); await setCanvasData(); - let throttleTimeout = null; let lastRunTime = 0; let trailingTimeout = null; @@ -63,6 +62,7 @@ } }); observer.value.observe(el.value); + emit("init-canvas", props.list); }); onBeforeUnmount(() => { observer.value.disconnect(); diff --git a/src/component/Canvas/canvasExample.vue b/src/component/Canvas/canvasExample.vue index be04b46a..4d270e12 100644 --- a/src/component/Canvas/canvasExample.vue +++ b/src/component/Canvas/canvasExample.vue @@ -335,15 +335,15 @@ 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",