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>
<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>