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

@@ -1093,4 +1093,22 @@ 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);