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