aida_front/src/component/Canvas/test.vue

<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="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 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>
	</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

			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;
				> div {
					display: flex;
					align-items: center;
					margin-bottom: 5px;
					> span {
						width: 80px;
					}
					> input {
						padding-left: 10px;
						border-radius: 5px;
					}
				}
			}
			> .box {
				position: fixed;
				top: 40%;
				left: 10%;
				width: 300px;
				height: 500px;
				overflow: hidden;
				border: 1px solid #000;
			}
		}
	}
</style>