同步印花平铺的位置信息

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);