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

111

Browse Source
This commit is contained in:
lzp
2026-03-13 14:33:33 +08:00
parent 25bc5fb1a7
commit 0146d6f583
3 changed files with 69 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Canvas/DepthCanvas/components/brush-control-panel.vue
View File

@@ -7,7 +7,7 @@
:is-input="false"
v-model="brushSize"
:tip-formatter="(v) => v + 'px'"
:min="5"
:min="1"
:max="100"
@input="onInputSize"
/>

65
src/components/Canvas/DepthCanvas/components/details-panel/basic-info.vue Normal file
View File

@@ -0,0 +1,65 @@
<template>
<div class="basic-info">
<div>
<span class="label">X:</span>
<span class="value">{{ object.left }}</span>
</div>
<div>
<span class="label">Y:</span>
<span class="value">{{ object.top }}</span>
</div>
<div>
<span class="label">Width:</span>
<span class="value">{{ object.width }}</span>
</div>
<div>
<span class="label">Height:</span>
<span class="value">{{ object.height }}</span>
</div>
<div>
<span class="label">缩放X:</span>
<span class="value">{{ object.scaleX }}</span>
</div>
<div>
<span class="label">缩放Y:</span>
<span class="value">{{ object.scaleY }}</span>
</div>
<div>
<span class="label">Angle:</span>
<span class="value">{{ object.angle }}</span>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, inject, computed, watch, onMounted } from 'vue'
const props = defineProps({
object: {
type: Object,
default: () => ({})
}
})
onMounted(() => {})
</script>
<style lang="less" scoped>
.basic-info {
> div {
padding: 0.8rem 0;
display: flex;
align-items: center;
> .label {
font-size: 1.6rem;
color: #000;
font-weight: bold;
min-width: 7rem;
text-align: right;
margin-right: 0.8rem;
}
> .value {
font-size: 1.6rem;
color: #333;
}
}
}
</style>

50
src/components/Canvas/DepthCanvas/components/details-panel/index.vue
View File

@@ -8,34 +8,7 @@
</span>
</div>
<div class="content" v-if="activeObject" v-show="show">
<div>
<span class="label">X:</span>
<span class="value">{{ activeObject.left }}</span>
</div>
<div>
<span class="label">Y:</span>
<span class="value">{{ activeObject.top }}</span>
</div>
<div>
<span class="label">Width:</span>
<span class="value">{{ activeObject.width }}</span>
</div>
<div>
<span class="label">Height:</span>
<span class="value">{{ activeObject.height }}</span>
</div>
<div>
<span class="label">缩放X:</span>
<span class="value">{{ activeObject.scaleX }}</span>
</div>
<div>
<span class="label">缩放Y:</span>
<span class="value">{{ activeObject.scaleY }}</span>
</div>
<div>
<span class="label">Angle:</span>
<span class="value">{{ activeObject.angle }}</span>
</div>
<basic-info :object="activeObject" />
</div>
</div>
</template>
@@ -51,8 +24,7 @@
const activeObject = ref(null)
const updateActiveObject = () => {
const obj = layers.value.find((v: any) => v.info.id === activeID.value)
// activeObject.value = obj?.toJSON('info') || null
activeObject.value = obj
activeObject.value = obj ? JSON.parse(JSON.stringify(obj)) : null
}
watch(layers, () => updateActiveObject())
watch(activeID, () => updateActiveObject())
@@ -95,23 +67,7 @@
}
> .content {
padding: 1.6rem;
> div {
padding: 0.8rem 0;
display: flex;
align-items: center;
> .label {
font-size: 1.6rem;
color: #000;
font-weight: bold;
min-width: 7rem;
text-align: right;
margin-right: 0.8rem;
}
> .value {
font-size: 1.6rem;
color: #333;
}
}
}
}
</style>