aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

略略略

Browse Source
This commit is contained in:
李志鹏
2026-01-08 17:04:37 +08:00
parent d863376b41
commit 274ea15dcc
1 changed files with 102 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
src/component/Canvas/test.vue
View File

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