From 274ea15dcc6330704387a8da9d5373bb15c0d07a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com>
Date: Thu, 8 Jan 2026 17:04:37 +0800
Subject: [PATCH] =?UTF-8?q?=E7=95=A5=E7=95=A5=E7=95=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/Canvas/test.vue | 156 ++++++++++++++++++++++------------
 1 file changed, 102 insertions(+), 54 deletions(-)

diff --git a/src/component/Canvas/test.vue b/src/component/Canvas/test.vue
index dc21c59a..db0be93e 100644
--- a/src/component/Canvas/test.vue
+++ b/src/component/Canvas/test.vue
@@ -1,73 +1,121 @@
 <template>
 	<div class="test">
-		<div class="control">
-			<div>
-				<span>偏移X</span>
-				<input type="number" v-model="data.offsetX" />
+		<div v-for="(item, index) in data" :key="index">
+			<div class="control">
+				<div>
+					<span>偏移X</span>
+					<input type="number" v-model="item.offsetX" />
+				</div>
+				<div>
+					<span>偏移Y</span>
+					<input type="number" v-model="item.offsetY" />
+				</div>
+				<div>
+					<span>角度</span>
+					<input type="number" v-model="item.angle" />
+				</div>
+				<div>
+					<span>缩放</span>
+					<input type="number" v-model="item.scale" />
+				</div>
+				<div>
+					<span>水平间距</span>
+					<input type="number" v-model="item.gapX" />
+				</div>
+				<div>
+					<span>垂直间距</span>
+					<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>
-				<span>偏移Y</span>
-				<input type="number" v-model="data.offsetY" />
+			<div class="box">
+				<pingpu v-bind="item" :style="{
+					transform: `translate(${item.object.left}px, ${item.object.top}px) scale(${item.object.scale})`,
+					transformOrigin: 'top left'
+				}" />
 			</div>
-			<div>
-				<span>角度</span>
-				<input type="number" v-model="data.angle" />
-			</div>
-			<div>
-				<span>缩放</span>
-				<input type="number" v-model="data.scale" />
-			</div>
-			<div>
-				<span>水平间距</span>
-				<input type="number" v-model="data.gapX" />
-			</div>
-			<div>
-				<span>垂直间距</span>
-				<input type="number" v-model="data.gapY" />
-			</div>
-		</div>
-		<div class="box">
-			<pingpu v-bind="data" />
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
 	import pingpu from "./pingpu.vue";
-	const data = ref({
-		url: "/src/assets/images/canvas/yinhua1.jpg",
-		offsetX: 0, // px
-		offsetY: 0, // px
-		angle: 0, // 角度
-		scale: 100,// %
-		gapX: 0, // px
-		gapY: 0, // px
-	});
-	window.data = data;
+	const data = ref([
+		{
+			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
+			}
+		},
+		{
+			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 {
-		> .control {
-			margin-left: 10px;
-			margin-top: 10px;
-			> div {
-				display: flex;
-				align-items: center;
-				margin-bottom: 5px;
-				> span {
-					width: 80px;
-				}
-				>input{
-					padding-left: 10px;
-					border-radius: 5px;
+		display: flex;
+		> div {
+			width: 50%;
+			> .control {
+				margin-left: 10px;
+				margin-top: 10px;
+				> div {
+					display: flex;
+					align-items: center;
+					margin-bottom: 5px;
+					> span {
+						width: 80px;
+					}
+					> input {
+						padding-left: 10px;
+						border-radius: 5px;
+					}
 				}
 			}
-		}
-		> .box {
-			width: 100%;
-			max-width: 400px;
-			height: 500px;
+			> .box {
+				position: fixed;
+				top: 40%;
+				left: 10%;
+				width: 300px;
+				height: 500px;
+				overflow: hidden;
+				border: 1px solid #000;
+			}
 		}
 	}
 </style>
\ No newline at end of file