略略略略略略略略略略略略

src/component/Canvas/CanvasEditor/commands/FillRepeatCommand.js

@@ -116,13 +116,15 @@ export class FillRepeatCommand extends Command {
 				flipY: object.flipY,
 			});
 		} else {
+			let scaleX = bgObject.scaleX || 1;
+			let scaleY = bgObject.scaleY || 1;
 			rect.set({
 				width: bgObject.width,
 				height: bgObject.height,
-				top: bgObject.top,
-				left: bgObject.left,
-				originX: bgObject.originX,
-				originY: bgObject.originY,
+				top: bgObject.top - bgObject.height * scaleY / 2,
+				left: bgObject.left - bgObject.width * scaleX / 2,
+				scaleX,
+				scaleY,
 			});
 			layer.locked = true;
 		}

src/component/Canvas/CanvasEditor/components/LayersPanel/LayersList.vue

@@ -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"
+            :is-multi-select-mode="isMultiSelectMode && !layer.specialType"
             :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) => forwardEvent('context-menu', ...args)"
+            @context-menu="(...args) => !layer.specialType && 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="groupName"
+              :group-name="layer.specialType || groupName"
               @layer-click="(...args) => forwardEvent('layer-click', ...args)"
               @layer-double-click="(...args) => forwardEvent('layer-double-click', ...args)"
               @context-menu="(...args) => forwardEvent('context-menu', ...args)"
@@ -385,17 +385,10 @@ const canDeleteComputed = computed(() => {
 <style scoped lang="less">
 // 从父组件的样式文件中继承相关样式
 .layers-list {
-  flex: 1;
-  overflow-y: auto;
-
   .sortable-layers {
     min-height: 20px;
   }
 
-  //   .layer-group {
-  //     // margin-bottom: 1px;
-  //   }
-
   .child-layers {
     position: relative;
     padding-left: 20px;

src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue

@@ -1240,6 +1240,12 @@ async function handleCrossLevelMove(moveData) {
   }
 
   try {
+	const layer = findLayerRecursively(layers.value, layerId).layer;
+	const toLayer = findLayerRecursively(layers.value, toParentId).layer;
+	if(layer?.specialType || toLayer?.specialType) {
+		console.warn("当前图层不可移动到外部");
+		return;
+	}
     // 如果有命令管理器，使用命令模式
     if (commandManager) {
       console.log("📝 使用命令模式执行跨层级移动");
@@ -1593,46 +1599,48 @@ async function moveGroupToGroup(draggedLayer, fromParentId, toParentId, newIndex
       <small>{{ $t('Canvas.Hint') }}</small>
     </div>
 
+	<div class="layers-list-container">
     <!-- 图层列表组件 -->
-    <LayersList
-      :layers="layers"
-      :active-layer-id="activeLayerId"
-      :sortable-root-layers="sortableRootLayers"
-      :fixed-layers="fixedLayers"
-      :selected-layer-ids="selectedLayerIds"
-      :is-multi-select-mode="isMultiSelectMode"
-      :editing-layer-id="editingLayerId"
-      :editing-layer-name="editingLayerName"
-      :thumbnail-manager="thumbnailManager"
-      :expanded-group-ids="expandedGroupIds"
-      :isChild="false"
-      group-name="layers-root"
-      @layer-click="handleLayerClick"
-      @layer-double-click="handleLayerDoubleClick"
-      @context-menu="showContextMenu"
-      @checkbox-change="handleCheckboxClick"
-      @toggle-visibility="toggleLayerVisibility"
-      @toggle-lock="toggleSelectedLayersLockByLayer"
-      @delete="removeLayer"
-      @edit-confirm="confirmEdit"
-      @edit-cancel="cancelEdit"
-      @edit-keydown="handleEditKeydown"
-      @touch-start="handleTouchStart"
-      @touch-move="handleTouchMove"
-      @touch-end="handleTouchEnd"
-      @update:editing-name="editingLayerName = $event"
-      @root-layers-sort="handleRootLayersSort"
-      @child-layers-sort="handleChildLayersSort"
-      @cross-level-move="handleCrossLevelMove"
-      @select-child-layer="selectChildLayer"
-      @start-child-layer-edit="startChildLayerEdit"
-      @child-context-menu="showChildLayerContextMenu"
-      @toggle-group-expanded="toggleGroupExpanded"
-      @toggle-child-visibility="toggleChildLayerVisibility"
-      @toggle-child-lock="toggleChildLayerLock"
-      @delete-child="deleteChildLayer"
-      @rename-child="renameChildLayer"
-    />
+		<LayersList
+		:layers="layers"
+		:active-layer-id="activeLayerId"
+		:sortable-root-layers="sortableRootLayers"
+		:fixed-layers="fixedLayers"
+		:selected-layer-ids="selectedLayerIds"
+		:is-multi-select-mode="isMultiSelectMode"
+		:editing-layer-id="editingLayerId"
+		:editing-layer-name="editingLayerName"
+		:thumbnail-manager="thumbnailManager"
+		:expanded-group-ids="expandedGroupIds"
+		:isChild="false"
+		group-name="layers-root"
+		@layer-click="handleLayerClick"
+		@layer-double-click="handleLayerDoubleClick"
+		@context-menu="showContextMenu"
+		@checkbox-change="handleCheckboxClick"
+		@toggle-visibility="toggleLayerVisibility"
+		@toggle-lock="toggleSelectedLayersLockByLayer"
+		@delete="removeLayer"
+		@edit-confirm="confirmEdit"
+		@edit-cancel="cancelEdit"
+		@edit-keydown="handleEditKeydown"
+		@touch-start="handleTouchStart"
+		@touch-move="handleTouchMove"
+		@touch-end="handleTouchEnd"
+		@update:editing-name="editingLayerName = $event"
+		@root-layers-sort="handleRootLayersSort"
+		@child-layers-sort="handleChildLayersSort"
+		@cross-level-move="handleCrossLevelMove"
+		@select-child-layer="selectChildLayer"
+		@start-child-layer-edit="startChildLayerEdit"
+		@child-context-menu="showChildLayerContextMenu"
+		@toggle-group-expanded="toggleGroupExpanded"
+		@toggle-child-visibility="toggleChildLayerVisibility"
+		@toggle-child-lock="toggleChildLayerLock"
+		@delete-child="deleteChildLayer"
+		@rename-child="renameChildLayer"
+		/>
+	</div>
     <!-- 固定层（背景层和固定层） -->
     <div v-if="fixedLayers.length > 0" class="fixed-layers">
       <!-- 遍历固定层 -->

src/component/Canvas/CanvasEditor/components/LayersPanel/layersPanel.less

@@ -11,9 +11,9 @@
   flex-direction: column;
   user-select: none;
   z-index: 6;
-  overflow-y: auto;
   width: 100%;
   // max-height: 70vh;
+  overflow: hidden;
   -webkit-overflow-scrolling: touch;
 }
 
@@ -161,12 +161,12 @@
     font-size: 1.1rem;
   }
 }
-
+.layers-list-container{
+	overflow-y: auto;
+}
 // 图层列表
 .layers-list {
   position: relative;
-  flex: 1;
-  overflow-y: auto;
 }
 
 // 图层项样式

src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue

@@ -179,7 +179,11 @@
 	import { ref, onMounted, watch, onUnmounted, reactive } from "vue";
 	import { useI18n } from "vue-i18n";
 	const { t } = useI18n();
-	import { OperationType, SpecialLayerId } from "../../utils/layerHelper";
+	import {
+		OperationType,
+		SpecialLayerId,
+		SpecialType,
+	} from "../../utils/layerHelper";
 	import { loadImageUrlToLayer } from "../../utils/imageHelper";
 	import {
 		calculateRotatedTopLeftDeg,
@@ -280,6 +284,9 @@
 	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);
 		});

src/component/Canvas/CanvasEditor/components/css/layersPanel.css

@@ -8,8 +8,8 @@
   flex-direction: column;
   user-select: none;
   z-index: 6;
-  overflow-y: auto;
   width: 100%;
+  overflow: hidden;
   -webkit-overflow-scrolling: touch;
 }
 .layers-header {
@@ -132,10 +132,11 @@
   color: #666;
   font-size: 1.1rem;
 }
+.layers-list-container {
+  overflow-y: auto;
+}
 .layers-list {
   position: relative;
-  flex: 1;
-  overflow-y: auto;
 }
 .layer-item {
   position: relative;

src/component/Canvas/CanvasEditor/components/tools/AngleTool.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="angle-tool">
+	<div class="angle-tool" :disabled="disabled">
 		<div
 			ref="dishRef"
 			class="dish"
@@ -11,7 +11,13 @@
 			</div>
 		</div>
 		<div class="input">
-			<input type="number" v-model="angle" @input="onInput" @change="onChange" />
+			<input
+				type="number"
+				v-model="angle"
+				@input="onInput"
+				@change="onChange"
+				:disabled="disabled"
+			/>
 		</div>
 	</div>
 </template>
@@ -25,14 +31,22 @@
 			type: Number,
 			default: 0,
 		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 	});
 	const emit = defineEmits(["change", "input"]);
 	const angle = ref(props.angle);
-	watch(() => props.angle, (value) => {
-		angle.value = value;
-	});
+	watch(
+		() => props.angle,
+		(value) => {
+			angle.value = value;
+		}
+	);
 	const dishRef = ref<HTMLDivElement>();
 	const mousedown = (e: MouseEvent | TouchEvent) => {
+		if (props.disabled) return;
 		const mousemove = (e: MouseEvent | TouchEvent) => {
 			if (!dishRef.value) return;
 			const { left, top, width, height } =
@@ -56,9 +70,10 @@
 		document.addEventListener("mouseup", mouseup);
 		document.addEventListener("touchend", mouseup);
 	};
-	const onInput = () => emit("input", angle.value);
+	const onInput = () => !props.disabled && emit("input", angle.value);
 	var changeTime: any = null;
 	const onChange = () => {
+		if (props.disabled) return;
 		clearTimeout(changeTime);
 		changeTime = setTimeout(() => emit("change", angle.value), 500);
 	};
@@ -79,10 +94,17 @@
 		display: flex;
 		align-items: center;
 		width: 100%;
+		--color: #000;
+		&[disabled="true"] {
+			--color: #b2b2b2;
+			> .dish {
+				cursor: not-allowed;
+			}
+		}
 		> .dish {
 			width: 24px;
 			height: 24px;
-			border: 1px solid #000;
+			border: 1px solid var(--color);
 			border-radius: 50%;
 			cursor: pointer;
 			> .pointer {
@@ -98,7 +120,7 @@
 					transform: translate(-50%, 0);
 					width: 35%;
 					height: 35%;
-					background-color: #000;
+					background-color: var(--color);
 					border-radius: 50%;
 				}
 			}
@@ -106,7 +128,7 @@
 		> .input {
 			margin-left: 5px;
 			font-size: 14px;
-			color: #000;
+			color: var(--color);
 			flex: 1;
 			// min-width: 45px;
 			// max-width: 80px;

src/component/Canvas/CanvasEditor/components/tools/MySelect.vue

@@ -5,6 +5,7 @@
 		@change="change"
 		:defaultValue="defaultValue"
 		@dropdownVisibleChange="dropdownVisibleChange"
+		:disabled="disabled"
 	>
 		<a-select-option
 			v-for="v in list"
@@ -21,6 +22,10 @@
 <script setup lang="ts">
 	import { ref, defineProps, defineEmits, watch } from "vue";
 	const props = defineProps({
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 		defaultValue: {
 			default: "",
 		},

src/component/Canvas/CanvasEditor/components/tools/Slider.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="slider">
+	<div class="slider" :disabled="disabled">
 		<div class="input-range">
 			<span
 				class="tip"
@@ -16,6 +16,7 @@
 				:step="props.step"
 				@input="onInput"
 				@change="onChange"
+				:disabled="disabled"
 			/>
 		</div>
 		<div class="input" v-show="isInput">
@@ -27,6 +28,7 @@
 				:step="props.step"
 				@input="onInput"
 				@change="onChange"
+				:disabled="disabled"
 			/>
 		</div>
 	</div>
@@ -35,6 +37,10 @@
 <script setup lang="ts">
 	import { ref, defineProps, defineEmits, watch } from "vue";
 	const props = defineProps({
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 		value: {
 			type: Number,
 			default: 0,
@@ -66,9 +72,10 @@
 		() => props.value,
 		(v) => (value.value = v)
 	);
-	const onInput = () => emit("input", Number(value.value));
+	const onInput = () => !props.disabled && emit("input", Number(value.value));
 	var changeTime: any = null;
 	const onChange = () => {
+		if (props.disabled) return;
 		clearTimeout(changeTime);
 		changeTime = setTimeout(() => emit("change", Number(value.value)), 500);
 	};

src/component/Canvas/CanvasEditor/index.vue

@@ -153,7 +153,7 @@ const canvasManagerLoaded = ref(false); //  画布是否加载完成
 // 红绿图模式状态
 const isRedGreenMode = ref(false);
 
-const isShowLayerPanel = ref(false); // 是否显示图层面板
+const isShowLayerPanel = ref(true); // 是否显示图层面板
 
 provide("isShowLayerPanel", isShowLayerPanel); // 提供红绿图模式状态给子组件
 

src/component/Canvas/CanvasEditor/managers/CanvasManager.js

@@ -13,6 +13,7 @@ import {
   createLayer,
   LayerType,
   SpecialLayerId,
+  SpecialType,
   BlendMode,
 } from "../utils/layerHelper";
 import { ObjectMoveCommand } from "../commands/ObjectCommands";
@@ -175,6 +176,7 @@ export class CanvasManager {
       // 返回false表示使用默认行为（直接添加到画布）
       return false;
     };
+	
 
     this.eraserStateManager = new EraserStateManager(
       this.canvas,
@@ -568,10 +570,10 @@ export class CanvasManager {
     }
 
 	// 更新颜色层信息
-	const colorObject = this.getLayerObjectById(SpecialLayerId.COLOR);
-	if(colorObject){
-		await this.setObjecCliptInfo(colorObject);
-	}
+	// const colorObject = this.getLayerObjectById(SpecialLayerId.COLOR);
+	// if(colorObject){
+	// 	await this.setObjecCliptInfo(colorObject);
+	// }
 	const groupLayer = this.layerManager.getLayerById(SpecialLayerId.SPECIAL_GROUP);
 	if(groupLayer){
 		const groupRect = new fabric.Rect({});
@@ -945,7 +947,7 @@ export class CanvasManager {
           options.restoreOpacityInRedGreen !== undefined
             ? options.restoreOpacityInRedGreen
             : false, // 默认在红绿图模式下恢复透明度
-		excludedLayers: [SpecialLayerId.SPECIAL_GROUP],
+		// excludedLayers: [SpecialLayerId.SPECIAL_GROUP], // 导出时排除的图层ID数组
       };
 
       // 如果在红绿图模式下且没有指定具体的图层，自动包含所有普通图层
@@ -1040,10 +1042,10 @@ export class CanvasManager {
    * 导出印花和元素图层
   */
   async exportPrintTrimsLayers() {
-    const object = this.layerManager.getLayerById(SpecialLayerId.SPECIAL_GROUP);
-	if(!object) return Promise.reject("印花和元素图层组不存在");
-	const ids = object.children.map((v) => v.id);
-	const objects = this.getObjectsByIds(ids).filter((v) => !!v.sourceData);
+    const glayer = this.layerManager.getLayerById(SpecialLayerId.SPECIAL_GROUP);
+	if(!glayer) return Promise.reject("印花和元素图层组不存在");
+	const ids = glayer.children.map((v) => v.id);
+	const objects = this.getObjectsByIds(ids);
 	const fixedLayerObj = this.getFixedLayerObject();
 	if(!fixedLayerObj) return Promise.reject("固定图层不存在");
 	const flWidth = fixedLayerObj.width
@@ -1055,33 +1057,55 @@ export class CanvasManager {
 	const prints = [];
 	const trims = [];
 	objects.forEach((v) => {
+		const sourceData = glayer.children.find((v_) => v_.id === v.id)?.metadata?.sourceData;
+		if(!sourceData) return;
 		const obj = {
-			ifSingle: v.sourceData.ifSingle,
-			level2Type: v.sourceData.level2Type,
-			designType: v.sourceData.designType,
-			path: v.sourceData.path,
-			minIOPath: v.sourceData.minIOPath,
+			ifSingle: typeof v.fill === "string",
+			level2Type: sourceData.level2Type,
+			designType: sourceData.designType,
+			path: sourceData.path,
+			minIOPath: sourceData.minIOPath,
 			location: [0, 0],
 			scale: [0, 0],
 			angle: v.angle,
-			name: v.sourceData.name,
-			priority: v.sourceData.priority,
-			gap: [0, 0],
+			name: sourceData.name,
+			priority: sourceData.priority,
+			object:{
+				top: 0,
+				left: 0,
+				scaleX: 0,//对象的缩放比例
+				scaleY: 0,//对象的缩放比例
+				opacity: v.opacity,
+				angle: v.angle,
+				flipX: v.flipX,//是否水平翻转
+				flipY: v.flipY,//是否垂直翻转
+				blendMode: v.globalCompositeOperation,// 混合模式
+				gapX: 0,// 平铺模式下的间距
+				gapY: 0,// 平铺模式下的间距
+			}
 		}
+		let left = (v.left - (flLeft - flWidth * flScaleX / 2));
+		let top = (v.top - (flTop - flHeight * flScaleY / 2));
+		let width = (v.width * v.scaleX);
+		let height = (v.height * v.scaleY);
+		let {x:cx, y:cy} = calculateCenterPoint(width, height, left, top, v.angle);
+		let oX = (cx-width/2) / flScaleX;
+		let oY = (cy-height/2) / flScaleY;
+		let oScaleX = (v.width * v.scaleX) / (flWidth * flScaleX);
+		let oScaleY = (v.height * v.scaleY) / (flHeight * flScaleY);
+		// obj.object.width = width;
+		// obj.object.height = height;
+		obj.object.top = oY;
+		obj.object.left = oX;
+		obj.object.scaleX = oScaleX;
+		obj.object.scaleY = oScaleY;
 		if(obj.ifSingle){
-			let left = (v.left - (flLeft - flWidth * flScaleX / 2));
-			let top = (v.top - (flTop - flHeight * flScaleY / 2));
-			let width = (v.width * v.scaleX);
-			let height = (v.height * v.scaleY);
-			let {x:cx, y:cy} = calculateCenterPoint(width, height, left, top, v.angle);
-			let x = (cx-width/2) / flScaleX;
-			let y = (cy-height/2) / flScaleY;
-			obj.location = [x, y];
-			obj.scale = [(v.width * v.scaleX) / (flWidth * flScaleX), (v.height * v.scaleY) / (flHeight * flScaleY)];
+			obj.location = [oX, oY];
+			obj.scale = [oScaleX, oScaleY];
 		}else{
 			let fill = v.fill;
 			let fill_ = v.fill_;
-			if(!fill || !fill_) return;
+			if(!fill || !fill_) return console.warn("印花元素不存在fill或fill_属性");
 			let {scale, angle} = getTransformScaleAngle(fill.patternTransform);
 			let scaleX = scale * 5 * v.fill_.width / flWidth;
 			let scaleY = scale * 5 * v.fill_.height / flHeight;
@@ -1339,7 +1363,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());
               // 验证图层关联关系  -  稳定后可以注释
@@ -1490,7 +1513,7 @@ export class CanvasManager {
 	  globalCompositeOperation: BlendMode.MULTIPLY,
 	  originColor: color,
 	});
-	await this.setObjecCliptInfo(colorRect);
+	// await this.setObjecCliptInfo(colorRect);
 	const gradientObj = palletToFill(color);
 	const gradient = new fabric.Gradient({
 	  type: 'linear',
@@ -1561,7 +1584,8 @@ export class CanvasManager {
             selectable: true,
             hasControls: true,
             hasBorders: true,
-			sourceData: item,
+			specialType: SpecialType.PRINT_TRIMS_O,
+			globalCompositeOperation: BlendMode.MULTIPLY,
 		  });
 		  resolve(fabricImage);
 		}, { crossOrigin: "anonymous" });
@@ -1574,7 +1598,10 @@ export class CanvasManager {
 	    visible: true,
 	    locked: false,
 	    opacity: 1.0,
+		specialType: SpecialType.PRINT_TRIMS_L,
+		blendMode: BlendMode.MULTIPLY,
 	    fabricObjects: [image.toObject(["id", "layerId", "layerName"])],
+		metadata: {sourceData: item},
 	  })
 	  children.push(layer);
 	};
@@ -1606,13 +1633,11 @@ export class CanvasManager {
       	layerName: name,
       	width: fixedLayerObj.width,
       	height: fixedLayerObj.height,
-      	top: fixedLayerObj.top,
-      	left: fixedLayerObj.left,
+      	top: fixedLayerObj.top - fixedLayerObj.height * fixedLayerObj.scaleY / 2,
+      	left: fixedLayerObj.left - fixedLayerObj.width * fixedLayerObj.scaleX / 2,
 		scaleX: fixedLayerObj.scaleX,
       	scaleY: fixedLayerObj.scaleY,
-      	originX: fixedLayerObj.originX,
-      	originY: fixedLayerObj.originY,
-		sourceData: item,
+		globalCompositeOperation: BlendMode.MULTIPLY,
       	fill: new fabric.Pattern({
           source: image,
           repeat: "repeat",
@@ -1626,7 +1651,8 @@ export class CanvasManager {
 			gapY: 0,
 			width: image.width,
 			height: image.height,
-		}
+		},
+		specialType: SpecialType.REPEAT_O,
       });
       this.canvas.add(rect);
 	  let layer = createLayer({
@@ -1636,7 +1662,10 @@ export class CanvasManager {
 	    visible: true,
 	    locked: true,
 	    opacity: 1,
+		specialType: SpecialType.REPEAT_L,
+		blendMode: BlendMode.MULTIPLY,
 	    fabricObjects: [rect.toObject(["id", "layerId", "layerName"])],
+		metadata: {sourceData: item},
 	  })
 	  children.push(layer);
 	};
@@ -1667,6 +1696,7 @@ export class CanvasManager {
 		children: children,
 		clippingMask: groupRect.toObject(),
 		isFixedClipMask: true,
+		specialType: SpecialType.PRINT_TRIMS_G,
 	});
 	this.layers.value.splice(groupIndex, 0, groupLayer);
   }
@@ -1675,29 +1705,29 @@ export class CanvasManager {
    * 画布事件变更后
   */
   async changeCanvas(){
-	// const fixedLayerObj = this.getFixedLayerObject();
-	// if(!fixedLayerObj) return console.warn("固定图层对象不存在", fixedLayerObj)
-	// const colorObject = this.getLayerObjectById(SpecialLayerId.COLOR);
-	// if(colorObject){
-	// 	const ids = this.layerManager.getBlendModeLayerIds(SpecialLayerId.SPECIAL_GROUP);
-	// 	if(ids.length === 0){
-	// 		ids.unshift(SpecialLayerId.SPECIAL_GROUP);
-	// 		await this.setObjecCliptInfo(colorObject);
-	// 		this.canvas.renderAll();
-	// 		return;
-	// 	}
-	// 	const base64 = await this.exportManager.exportImage({layerIdArray2: ids, isEnhanceImg: true});
-	// 	if(!base64) return console.warn("导出图片失败", base64)
-	// 	const canvas = await base64ToCanvas(base64, fixedLayerObj.scaleX * 2, true);
-	// 	const ctx = canvas.getContext('2d');
-	// 	const width = fixedLayerObj.width;
-	// 	const height = fixedLayerObj.height;
-	// 	const x = (canvas.width - width) / 2;
-	// 	const y = (canvas.height - height) / 2;
-	// 	const data = ctx.getImageData(x, y, width, height);
-	// 	await this.setObjecCliptInfo(colorObject, data);
-	// 	this.canvas.renderAll();
-	// }
+	const fixedLayerObj = this.getFixedLayerObject();
+	if(!fixedLayerObj) return console.warn("固定图层对象不存在", fixedLayerObj)
+	const colorObject = this.getLayerObjectById(SpecialLayerId.COLOR);
+	if(colorObject){
+		const ids = this.layerManager.getBlendModeLayerIds(SpecialLayerId.SPECIAL_GROUP);
+		if(ids.length === 0){
+			ids.unshift(SpecialLayerId.SPECIAL_GROUP);
+			await this.setObjecCliptInfo(colorObject);
+			this.canvas.renderAll();
+			return;
+		}
+		const base64 = await this.exportManager.exportImage({layerIdArray2: ids, isEnhanceImg: true});
+		if(!base64) return console.warn("导出图片失败", base64)
+		const canvas = await base64ToCanvas(base64, fixedLayerObj.scaleX * 2, true);
+		const ctx = canvas.getContext('2d');
+		const width = fixedLayerObj.width;
+		const height = fixedLayerObj.height;
+		const x = (canvas.width - width) / 2;
+		const y = (canvas.height - height) / 2;
+		const data = ctx.getImageData(x, y, width, height);
+		await this.setObjecCliptInfo(colorObject, data);
+		this.canvas.renderAll();
+	}
   }
 
   /**

src/component/Canvas/CanvasEditor/managers/ExportManager.js

@@ -45,12 +45,6 @@ export class ExportManager {
 	  excludedLayers = [], // 排除的图层ID数组
     } = options;
     try {
-      // 查找颜色图层并隐藏
-    //   const colorLayer = this.layerManager.getLayerById(SpecialLayerId.COLOR);
-    //   if (colorLayer && colorLayer.visible) {
-    //     colorLayer.visible = false;
-    //     await this.layerManager?.updateLayersObjectsInteractivity();
-    //   }
 
       // 检查是否为红绿图模式
       const isRedGreenMode = this.layerManager?.isInRedGreenMode?.() || false;

src/component/Canvas/CanvasEditor/utils/helper.js

@@ -767,16 +767,13 @@ export function getLayerObjectsZIndex(canvas, layerId) {
  * @param {number} y1 第一个点的y坐标
  * @param {number} x2 第二个点的x坐标
  * @param {number} y2 第二个点的y坐标
- * @returns {number} 角度值（-90 - 270度）
+ * @returns {number} 角度值（-180 - 180度）
 */
 export function calculateAngle(x1, y1, x2, y2, int = false) {
-    // 计算两点之间的差值
     const deltaX = x2 - x1;
-    const deltaY = y2 - y1;
-    
-    // 使用Math.atan2计算弧度，然后转换为角度
-    let angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI + 90;
-        
+    const deltaY = y1 - y2;
+    let angle = Math.atan2(deltaX, deltaY) * (180 / Math.PI);
+	// if(angle < 0) angle += 360;// 0 - 360度
     return int ? Math.round(angle) : angle;
 }
 

src/component/Canvas/CanvasEditor/utils/layerHelper.js

@@ -25,6 +25,17 @@ 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",// 平铺图层对象
+}
+
 
 
 

src/component/Canvas/canvasExample.vue

@@ -71,8 +71,8 @@ const editorConfig = {
 const exportImage = async () => {
   if (canvasEditor.value) {
     const base64 = await canvasEditor.value.exportImage({
-      isContainFixed: false, // 是否导出底图
-	  isContainFixedOther: false, // 是否导出其他固定图层
+      isContainFixed: true, // 是否导出底图
+	  isContainFixedOther: true, // 是否导出其他固定图层
       isContainBg: false, // 是否导出背景
 	  isEnhanceImg: false, // 是否导出增强图片
     });
@@ -301,7 +301,7 @@ const otherData = {
                 designType: "Library",
                 path: "/src/assets/images/canvas/yinhua1.jpg",
                 location: [250, 780],
-                scale: [0.5 * 0.7, 0.272541 * 0.7],
+                scale: [0.3, 0.4],
                 angle: 0,
             },
             {
@@ -309,8 +309,8 @@ const otherData = {
                 level2Type: "Pattern",
                 designType: "Library",
                 path: "/src/assets/images/canvas/yinhua1.jpg",
-                location: [250, 780],
-                scale: [0.5 * 0.7, 0.272541 * 0.7],
+                location: [650, 650],
+                scale: [0.15, 0.2],
                 angle: 0,
             },
 			{
@@ -318,8 +318,8 @@ const otherData = {
                 level2Type: "Pattern",
                 designType: "Library",
                 path: "/src/assets/images/canvas/yinhua1.jpg",
-                location: [300, 500],
-                scale: [0.5 * 0.4, 0.272541 * 0.4],
+                location: [700, 400],
+                scale: [0.1, 0.133],
                 angle: 0,
             }
         ]