github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: 画布标尺缩放优化

Browse Source
This commit is contained in:
pipipi-pikachu 2022-05-01 14:33:29 +08:00
parent 297aa6cca2
commit d7a9fc0e28
1 changed files with 34 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/views/Editor/Canvas/Ruler.vue
View File

@ -7,7 +7,14 @@
left: viewportStyles.left + 'px',
}"
>
<div class="ruler-mark-100" v-for="mark in 10" :key="`mark-100-${mark}`">{{mark * 100}}</div>
<div
class="ruler-marker-100"
:class="{ 'hide': markerSize < 36, 'omit': markerSize < 72 }"
v-for="marker in 10"
:key="`marker-100-${marker}`"
>
<span>{{marker * 100}}</span>
</div>
</div>
<div
class="v"
@ -17,11 +24,14 @@
}"
>
<div
class="ruler-mark-100"
v-for="mark in 10"
:key="mark"
:style="{ height: markSize + 'px' }"
>{{mark * 100}}</div>
class="ruler-marker-100"
:class="{ 'hide': markerSize < 36, 'omit': markerSize < 72 }"
v-for="marker in 10"
:key="marker"
:style="{ height: markerSize + 'px' }"
>
<span>{{marker * 100}}</span>
</div>
</div>
</div>
</template>
@ -48,13 +58,13 @@ export default defineComponent({
setup(props) {
const { canvasScale } = storeToRefs(useMainStore())
const markSize = computed(() => {
const markerSize = computed(() => {
return props.viewportStyles.width * canvasScale.value / 10
})
return {
canvasScale,
markSize,
markerSize,
}
},
})
@ -75,7 +85,7 @@ export default defineComponent({
justify-content: space-between;
align-items: center;
.ruler-mark-100 {
.ruler-marker-100 {
height: 100%;
line-height: 20px;
text-align: right;
@ -83,6 +93,13 @@ export default defineComponent({
padding-right: 5px;
position: relative;
&.hide span {
display: none;
}
&.omit::before {
display: none;
}
&:not(:last-child)::after {
content: '';
width: .1px;
@ -111,7 +128,7 @@ export default defineComponent({
left: 5px;
overflow: hidden;
.ruler-mark-100 {
.ruler-marker-100 {
width: 100%;
line-height: 20px;
text-align: right;
@ -119,6 +136,13 @@ export default defineComponent({
position: relative;
writing-mode: vertical-rl;
&.hide span {
display: none;
}
&.omit::before {
display: none;
}
&:not(:last-child)::after {
content: '';
height: .1px;