Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite

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

@@ -7,6 +7,7 @@ import {
 	insertObjectAtZIndex,
 	removeCanvasObjectByObject,
 	createPatternTransform,
+	imageAddGapToCanvas,
 } from "../utils/helper";
 import { restoreFabricObject } from "../utils/objectHelper";
 
@@ -308,16 +309,8 @@ export class FillRepeatGapChangeCommand extends Command {
 		await image.decode();
 		object.fill_.width = image.width;
 		object.fill_.height = image.height;
-		// 创建透明 Canvas
-		const tcanvas = document.createElement('canvas');
-		tcanvas.width = image.width + object.fill_.gapX;
-		tcanvas.height = image.height + object.fill_.gapY;
-		const ctx = tcanvas.getContext('2d');
-		ctx.clearRect(0, 0, tcanvas.width, tcanvas.height);
-		ctx.drawImage(image, 0, 0);
-
 		const fill = object.get("fill");
-		fill.source = tcanvas;
+		fill.source = imageAddGapToCanvas(image, object.fill_.gapX, object.fill_.gapY);
 		object.set("fill", new fabric.Pattern(fill));
 		this.canvas.renderAll();
 		return true;

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

@@ -433,7 +433,7 @@
 		};
 		changeFill(obj, pattern);
 	};
-	// 改变填充便宜
+	// 改变填充偏移
 	const inputFillOffset = (value, obj) => {
 		if (!obj.oldPattern) obj.oldPattern = obj.get("fill");
 		const pattern = new fabric.Pattern({

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

@@ -34,6 +34,7 @@ import {
   createPatternTransform,
   getTransformScaleAngle,
   base64ToCanvas,
+  imageAddGapToCanvas,
 } from "../utils/helper";
 import { ChangeFixedImageCommand } from "../commands/ObjectLayerCommands";
 import { isFunction } from "lodash-es";
@@ -1630,38 +1631,57 @@ export class CanvasManager {
 			resolve(tcanvas);
 		}, { crossOrigin: "anonymous" });
 	  })
-	  let scaleX = fixedLayerObj.width / image.width * (item.scale?.[0] || 1) / 5;
+	  let scaleX_ = fixedLayerObj.width / image.width * (item.scale?.[0] || 1) / 5;
-	  let scaleY = fixedLayerObj.height / image.height * (item.scale?.[1] || 1) / 5;
+	  let scaleY_ = fixedLayerObj.height / image.height * (item.scale?.[1] || 1) / 5;
-	  let scale = fixedLayerObj.width > fixedLayerObj.height ? scaleX : scaleY;
+	  let scale = fixedLayerObj.width > fixedLayerObj.height ? scaleX_ : scaleY_;
-      let left = (item.location?.[0] || 0) - image.width * scale / 2
+      let offsetX = (item.location?.[0] || 0) - image.width * scale / 2
-      let top = (item.location?.[1] || 0) - image.height * scale / 2
+      let offsetY = (item.location?.[1] || 0) - image.height * scale / 2
+	  let top = fixedLayerObj.top - fixedLayerObj.height * fixedLayerObj.scaleY / 2
+	  let left = fixedLayerObj.left - fixedLayerObj.width * fixedLayerObj.scaleX / 2
+	  let scaleX = fixedLayerObj.scaleX
+	  let scaleY = fixedLayerObj.scaleY
+	  let opacity = 1
+	  let angle = 0
+	  let gapX = 0
+	  let gapY = 0
+	  let fillSource = image
+	  if(item.object){
+	    top += item.object.top * fixedLayerObj.scaleY
+	    left += item.object.left * fixedLayerObj.scaleX
+	    scaleX *= item.object.scaleX
+	    scaleY *= item.object.scaleY
+		opacity = item.object.opacity
+		angle = item.object.angle
+		gapX = item.object.gapX
+		gapY = item.object.gapY
+		fillSource = imageAddGapToCanvas(image, gapX, gapY);
+	  }
       let rect = new fabric.Rect({
       	id: id,
       	layerId: id,
       	layerName: name,
       	width: fixedLayerObj.width,
       	height: fixedLayerObj.height,
-      	top: fixedLayerObj.top - fixedLayerObj.height * fixedLayerObj.scaleY / 2,
+      	top: top,
-      	left: fixedLayerObj.left - fixedLayerObj.width * fixedLayerObj.scaleX / 2,
+      	left: left,
-		scaleX: fixedLayerObj.scaleX,
+		scaleX: scaleX,
-      	scaleY: fixedLayerObj.scaleY,
+      	scaleY: scaleY,
 		globalCompositeOperation: BlendMode.MULTIPLY,
       	fill: new fabric.Pattern({
-          source: image,
+          source: fillSource,
           repeat: "repeat",
           patternTransform: createPatternTransform(scale, item.angle || 0),
-          offsetX: left, // 水平偏移
+          offsetX: offsetX, // 水平偏移
-          offsetY: top, // 垂直偏移
+          offsetY: offsetY, // 垂直偏移
       	}),
 		fill_ : {
 			source: item.path,
-			gapX: 0,
+			gapX: gapX,
-			gapY: 0,
+			gapY: gapY,
 			width: image.width,
 			height: image.height,
 		},
 		isPrintTrims: true,
-		// ...(item.object || {}),
       });
       this.canvas.add(rect);
 	  let layer = createLayer({

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

@@ -1094,3 +1094,21 @@ export	function traceImageContour(canvas) {
 
 	return contour;
 }
+
+/**
+ * 图片添加gap转换
+ * @param {HTMLCanvasElement} image - img元素
+ * @param {Number} gapX - 水平gap
+ * @param {Number} gapY - 垂直gap
+ * @returns {HTMLCanvasElement} 转换后的canvas元素
+*/
+export function imageAddGapToCanvas(image, gapX, gapY) {
+	// 创建透明 Canvas
+	const tcanvas = document.createElement('canvas');
+	tcanvas.width = image.width + gapX;
+	tcanvas.height = image.height + gapY;
+	const ctx = tcanvas.getContext('2d');
+	ctx.clearRect(0, 0, tcanvas.width, tcanvas.height);
+	ctx.drawImage(image, 0, 0);
+	return tcanvas;
+}

src/component/Canvas/OverallCanvas/demo.vue

@@ -139,6 +139,8 @@
 			<pingpu
 				:list="list"
 				ref="pingpuRef"
+				:width="600"
+				:height="900"
 				@change-canvas="updateCanvas"
 			/>
 		</div>
@@ -197,12 +199,12 @@
 			name: "Print2",
 			priority: 1,
 			object: {
-				top: 150,
+				top: 450,
-				left: 250,
+				left: 300,
 				scaleX: 0.5,
 				scaleY: 0.5,
 				opacity: 1,
-				angle: 45,
+				angle: 0,
 				flipX: false,
 				flipY: false,
 				blendMode: "multiply",

src/component/Canvas/OverallCanvas/index.vue

@@ -33,6 +33,8 @@
 	const emit = defineEmits(["change-canvas", "init-canvas"]);
 	const props = defineProps({
 		list: { type: Array, default: () => [] },
+		width: { type: Number, required: true },
+		height: { type: Number, required: true },
 	});
 	const el = ref(null);
 	const canvasRef = ref(null);
@@ -106,13 +108,13 @@
 				token,
 				action: ACTIONS.UPDATE,
 				key: KEYS.O_TOP,
-				value: object.top,
+				value: (props.height / canvas.height) * object.top,
 			});
 			list.push({
 				token,
 				action: ACTIONS.UPDATE,
 				key: KEYS.O_LEFT,
-				value: object.left,
+				value: (props.width / canvas.width) * object.left,
 			});
 			if (action === "rotate") {
 				list.push({
@@ -188,6 +190,8 @@
 			height: cheight,
 			fill: pattern,
 			...item.object,
+			top: item.object.top / (props.height / canvas.height),
+			left: item.object.left / (props.width / canvas.width),
 			onDelete: (v) => onDeleteItem(v),
 		});
 		canvas.add(rect);
@@ -237,10 +241,10 @@
 				let value = item.value;
 				switch (item.key) {
 					case KEYS.O_TOP:
-						object.set("top", value);
+						object.set("top", value / (props.height / canvas.height));
 						break;
 					case KEYS.O_LEFT:
-						object.set("left", value);
+						object.set("left", value / (props.width / canvas.width));
 						break;
 					case KEYS.O_OPACITY:
 						object.set("opacity", value);

src/component/Canvas/canvasExample.vue

@@ -52,7 +52,7 @@ const imageData = [
 
 	const handleImageSelect = (selectedImage) => {
 		console.log("选中的图片:", selectedImage);
-  console.log(selectedImage)
+		console.log(selectedImage);
 		// selectedImage 包含：url, name, categoryName, categoryType, originalItem
 	};
 
@@ -113,7 +113,7 @@ const exportExtraInfo = async () => {
 	const updateOtherLayersColor = async () => {
 		const obj = {
 			color: { rgba: { r: 255, g: 255, b: 0, a: 1 } },
-  }
+		};
 		await canvasEditor?.value?.updateOtherLayers?.(obj);
 	};
 	// 更新其他图层印花
@@ -131,9 +131,9 @@ const updateOtherLayersPrint = async () => {
 						scale: [0.3, 0.4],
 						angle: 0,
 					},
-		]
+				],
 			},
-  }
+		};
 		await canvasEditor?.value?.updateOtherLayers?.(obj);
 	};
 
@@ -205,8 +205,8 @@ const copyJSON = () => {
 		navigator.clipboard.writeText(json);
 	};
 	const getLayers = () => {
-  console.log("==========layers",canvasEditor.value?.layers)
+		console.log("==========layers", canvasEditor.value?.layers);
-}
+	};
 	// 处理自定义工具点击
 	const handleCustomToolClick = (tool) => {
 		tool.action();
@@ -226,8 +226,7 @@ const canvasInit = () => {
 		// });
 	};
 
-const frontBackChange =(value)=>{
+	const frontBackChange = (value) => {};
-}
 
 	// 自定义工具配置相关
 	const customToolsList = ref([
@@ -291,14 +290,14 @@ const customToolsList = ref([
 		{
 			id: "redGreenExample",
 			title: "红绿图模式",
-    action: () => switchView('redGreenExample'),
+			action: () => switchView("redGreenExample"),
 			label: "红",
 			class: "export-btn",
 		},
 		{
 			id: "canvasEditor",
 			title: "普通模式",
-    action: () => switchView('canvasEditor'),
+			action: () => switchView("canvasEditor"),
 			label: "普",
 			class: "export-btn",
 		},
@@ -335,36 +334,49 @@ 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,
+					},
+				},
 				// {
-            //     ifSingle: false,
+				// 	ifSingle: true,
 				// 	level2Type: "Pattern",
 				// 	designType: "Library",
 				// 	path: "/src/assets/images/canvas/yinhua1.jpg",
-            //     location: [250, 780],
+				// 	location: [550, 650],
-            //     scale: [0.3, 0.4],
+				// 	scale: [0.15, 0.2],
 				// 	angle: 0,
 				// },
-            {
+				// {
-                ifSingle: true,
+				// 	ifSingle: true,
-                level2Type: "Pattern",
+				// 	level2Type: "Pattern",
-                designType: "Library",
+				// 	designType: "Library",
-                path: "/src/assets/images/canvas/yinhua1.jpg",
+				// 	path: "/src/assets/images/canvas/yinhua1.jpg",
-                location: [550, 650],
+				// 	location: [700, 400],
-                scale: [0.15, 0.2],
+				// 	scale: [0.1, 0.133],
-                angle: 0,
+				// 	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>
 
 <template>
@@ -405,7 +417,10 @@ const otherData = {
 				showFixedLayer
 			>
 				<template #existsImageList>
-          <ExistsImageList :list="imageData" @select="handleImageSelect" />
+					<ExistsImageList
+						:list="imageData"
+						@select="handleImageSelect"
+					/>
 				</template>
 
 				<!-- 使用插槽添加自定义工具栏按钮 -->