同步印花平铺的位置信息

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,
-				left: 250,
+				top: 450,
+				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);