略略略

src/component/Canvas/test.vue

@@ -1,53 +1,96 @@
 <template>
 	<div class="test">
+		<div v-for="(item, index) in data" :key="index">
 			<div class="control">
 				<div>
 					<span>偏移X</span>
-				<input type="number" v-model="data.offsetX" />
+					<input type="number" v-model="item.offsetX" />
 				</div>
 				<div>
 					<span>偏移Y</span>
-				<input type="number" v-model="data.offsetY" />
+					<input type="number" v-model="item.offsetY" />
 				</div>
 				<div>
 					<span>角度</span>
-				<input type="number" v-model="data.angle" />
+					<input type="number" v-model="item.angle" />
 				</div>
 				<div>
 					<span>缩放</span>
-				<input type="number" v-model="data.scale" />
+					<input type="number" v-model="item.scale" />
 				</div>
 				<div>
 					<span>水平间距</span>
-				<input type="number" v-model="data.gapX" />
+					<input type="number" v-model="item.gapX" />
 				</div>
 				<div>
 					<span>垂直间距</span>
-				<input type="number" v-model="data.gapY" />
+					<input type="number" v-model="item.gapY" />
+				</div>
+				<h2>---------整体--------</h2>
+				<div>
+					<span>缩放</span>
+					<input type="number" v-model="item.object.scale" step="0.1" />
+				</div>
+				<div>
+					<span>X</span>
+					<input type="number" v-model="item.object.left" />
+				</div>
+				<div>
+					<span>Y</span>
+					<input type="number" v-model="item.object.top" />
 				</div>
 			</div>
 			<div class="box">
-			<pingpu v-bind="data" />
+				<pingpu v-bind="item" :style="{
+					transform: `translate(${item.object.left}px, ${item.object.top}px) scale(${item.object.scale})`,
+					transformOrigin: 'top left'
+				}" />
+			</div>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
 	import pingpu from "./pingpu.vue";
-	const data = ref({
+	const data = ref([
+		{
 			url: "/src/assets/images/canvas/yinhua1.jpg",
 			offsetX: 0, // px
 			offsetY: 0, // px
 			angle: 0, // 角度
-		scale: 100,// %
+			scale: 100, // %
 			gapX: 0, // px
 			gapY: 0, // px
-	});
+
-	window.data = data;
+			object:{
+				scale: 1, // %
+				top: 0, // px
+				left: 0, // px
+			}
+		},
+		{
+			url: "/src/assets/images/canvas/yinhua1.jpg",
+			offsetX: 0, // px
+			offsetY: 0, // px
+			angle: 0, // 角度
+			scale: 100, // %
+			gapX: 0, // px
+			gapY: 0, // px
+
+			object:{
+				scale: 1, // %
+				top: 0, // px
+				left: 0, // px
+			}
+		},
+	]);
 </script>
 
 <style lang='less' scoped>
 	.test {
+		display: flex;
+		> div {
+			width: 50%;
 			> .control {
 				margin-left: 10px;
 				margin-top: 10px;
@@ -58,16 +101,21 @@
 					> span {
 						width: 80px;
 					}
-				>input{
+					> input {
 						padding-left: 10px;
 						border-radius: 5px;
 					}
 				}
 			}
 			> .box {
-			width: 100%;
+				position: fixed;
-			max-width: 400px;
+				top: 40%;
+				left: 10%;
+				width: 300px;
 				height: 500px;
+				overflow: hidden;
+				border: 1px solid #000;
+			}
 		}
 	}
 </style>