aida_front/src/component/Canvas/test.vue

<template>
	<div class="test">
		<div class="control">
			<div>
				<span>偏移X</span>
				<input type="number" v-model="data.offsetX" />
			</div>
			<div>
				<span>偏移Y</span>
				<input type="number" v-model="data.offsetY" />
			</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;
</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;
				}
			}
		}
		> .box {
			width: 100%;
			max-width: 400px;
			height: 500px;
		}
	}
</style>