Commit e4629888 authored by 罗超's avatar 罗超

修复播放时,幻灯片竖版比例问题

parent 03ad1613
<template> <template>
<div <div
class="screen-slide" class="screen-slide"
style="overflow: hidden;"
:style="{ :style="{
width: VIEWPORT_SIZE + 'px', width: (viewportRatio<1 ? VIEWPORT_SIZE:VIEWPORT_VER_SIZE )+ 'px',
height: VIEWPORT_SIZE * viewportRatio + 'px', height: (viewportRatio<1 ? VIEWPORT_SIZE:VIEWPORT_VER_SIZE ) * viewportRatio + 'px',
transform: `scale(${scale})`, transform: `scale(${scale})`,
}" }"
> >
...@@ -26,7 +27,7 @@ import { storeToRefs } from 'pinia' ...@@ -26,7 +27,7 @@ import { storeToRefs } from 'pinia'
import { useSlidesStore } from '@/store' import { useSlidesStore } from '@/store'
import type { Slide } from '@/types/slides' import type { Slide } from '@/types/slides'
import { injectKeySlideId } from '@/types/injectKey' import { injectKeySlideId } from '@/types/injectKey'
import { VIEWPORT_SIZE } from '@/configs/canvas' import { VIEWPORT_SIZE,VIEWPORT_VER_SIZE } from '@/configs/canvas'
import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle' import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
import ScreenElement from './ScreenElement.vue' import ScreenElement from './ScreenElement.vue'
......
...@@ -39,7 +39,7 @@ import { computed, provide } from 'vue' ...@@ -39,7 +39,7 @@ import { computed, provide } from 'vue'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import { useSlidesStore } from '@/store' import { useSlidesStore } from '@/store'
import { injectKeySlideScale } from '@/types/injectKey' import { injectKeySlideScale } from '@/types/injectKey'
import { VIEWPORT_SIZE } from '@/configs/canvas' import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
import { SLIDE_ANIMATIONS } from '@/configs/animation' import { SLIDE_ANIMATIONS } from '@/configs/animation'
import ScreenSlide from './ScreenSlide.vue' import ScreenSlide from './ScreenSlide.vue'
...@@ -52,7 +52,7 @@ const props = defineProps<{ ...@@ -52,7 +52,7 @@ const props = defineProps<{
manualExitFullscreen: () => void manualExitFullscreen: () => void
}>() }>()
const { slides, slideIndex } = storeToRefs(useSlidesStore()) const { slides, slideIndex,viewportRatio } = storeToRefs(useSlidesStore())
const slidesWithTurningMode = computed(() => { const slidesWithTurningMode = computed(() => {
return slides.value.map(slide => { return slides.value.map(slide => {
...@@ -68,8 +68,7 @@ const slidesWithTurningMode = computed(() => { ...@@ -68,8 +68,7 @@ const slidesWithTurningMode = computed(() => {
} }
}) })
}) })
const scale = computed(() => props.slideWidth / (viewportRatio.value<1 ? VIEWPORT_SIZE:VIEWPORT_VER_SIZE ))
const scale = computed(() => props.slideWidth / VIEWPORT_SIZE)
provide(injectKeySlideScale, scale) provide(injectKeySlideScale, scale)
</script> </script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment