【PPTist】幻灯片放映

放映功能的代码都在 src/hooks/useScreening.ts，我们看一下 从当前页开始 放映的功能。

1. // 进入放映状态（从当前页开始）
2. const enterScreening = () => {
3.   enterFullscreen()
4.   screenStore.setScreening(true)
5. }

复制代码

起首是 enterFullscreen()，进入全屏放映
src/utils/fullscreen.ts

1. // 进入全屏
2. export const enterFullscreen = () => {
3.   const docElm = document.documentElement
4.   if (docElm.requestFullscreen) docElm.requestFullscreen()
5.   else if (docElm.mozRequestFullScreen) docElm.mozRequestFullScreen()
6.   else if (docElm.webkitRequestFullScreen) docElm.webkitRequestFullScreen()
7.   else if (docElm.msRequestFullscreen) docElm.msRequestFullscreen()
8. }

复制代码

进入全屏指的是整个编辑器 document.documentElement 进入全屏

就先找一下当前的浏览器能用的全屏的方法，然后调用。
然后执行 screenStore.setScreening(true)
src/store/screen.ts

1. setScreening(screening: boolean) {
2.   this.screening = screening
3. },

复制代码

然后通过这个属性控制的App..vue中的组件的显示
src/App.vue

1. <template>
2.   <Screen v-if="screening" />
3.   <Editor v-else-if="_isPC" />
4.   <Mobile v-else />
5. </template>

复制代码

进入放映模式
src/views/Screen/index.vue

1. <template>
2.   <div class="pptist-screen">
3.     <BaseView :changeViewMode="changeViewMode" v-if="viewMode === 'base'" />
4.     <PresenterView :changeViewMode="changeViewMode" v-else-if="viewMode === 'presenter'" />
5.   </div>
6. </template>

复制代码

通过幻灯片放映的下拉框进入的是普通视图，就是 BaseView。然后右键有一个演讲者视图，就是 PresenterView

1、普通视图

src/views/Screen/BaseView.vue
右键点击工具栏的时候右下角会浮现工具栏

这内里的内容其实跟右键菜单项差不多
① 画笔工具

右键点击画笔工具时会出现画笔工具 src/views/Screen/WritingBoardTool.vue

利用画笔工具的时候，sizePopoverType 这个属性用来表现当前利用的是哪个工具。
绘制过程的组件 src/components/WritingBoard.vue，
绘制过程分为三个阶段，鼠标落下、鼠标移动、鼠标抬起

• mousedown
  

1. // 处理鼠标（触摸）事件
2. // 准备开始绘制/擦除墨迹（落笔）
3. const handleMousedown = (e: MouseEvent | TouchEvent) => {
4.   // 获取鼠标在canvas中的相对位置
5.   const [mouseX, mouseY] = getMouseOffsetPosition(e)
6.   // 计算鼠标在canvas中的绝对位置
7.   const x = mouseX / widthScale.value
8.   const y = mouseY / heightScale.value
10.   // 设置鼠标状态
11.   isMouseDown = true
12.   lastPos = { x, y }
13.   lastTime = new Date().getTime()
15.   // 设置鼠标状态
16.   if (!(e instanceof MouseEvent)) {
17.     mouse.value = { x: mouseX, y: mouseY }
18.     mouseInCanvas.value = true
19.   }
20. }

复制代码

• mousemove
  

1. // 开始绘制/擦除墨迹（移动）
2. const handleMousemove = (e: MouseEvent | TouchEvent) => {
3.   // 获取鼠标在canvas中的相对位置
4.   const [mouseX, mouseY] = getMouseOffsetPosition(e)
5.   // 计算鼠标在canvas中的绝对位置
6.   const x = mouseX / widthScale.value
7.   const y = mouseY / heightScale.value
9.   // 设置鼠标位置
10.   mouse.value = { x: mouseX, y: mouseY }
12.   // 开始绘制/擦除墨迹
13.   if (isMouseDown) handleMove(x, y)
14. }

复制代码

1. // 路径操作
2. const handleMove = (x: number, y: number) => {
3.   const time = new Date().getTime()
5.   if (props.model === 'pen') {
6.     const s = getDistance(x, y)
7.     const t = time - lastTime
8.     const lineWidth = getLineWidth(s, t)
10.     draw(x, y, lineWidth)
11.     lastLineWidth = lineWidth
12.   }
13.   else if (props.model === 'mark') draw(x, y, props.markSize)
14.   else erase(x, y)
16.   lastPos = { x, y }
17.   lastTime = new Date().getTime()
18. }

复制代码

此中画画、橡皮擦是通过 canvas 实现的

1. // 绘制画笔墨迹方法
2. const draw = (posX: number, posY: number, lineWidth: number) => {
3.   if (!ctx) return
5.   const lastPosX = lastPos.x
6.   const lastPosY = lastPos.y
8.   ctx.lineWidth = lineWidth
9.   ctx.strokeStyle = props.color
10.   ctx.beginPath()
11.   ctx.moveTo(lastPosX, lastPosY)
12.   ctx.lineTo(posX, posY)
13.   ctx.stroke()
14.   ctx.closePath()
15. }

复制代码

• mouseup
  

1. // 结束绘制/擦除墨迹（停笔）
2. const handleMouseup = () => {
3.   if (!isMouseDown) return
4.   isMouseDown = false
5.   emit('end')
6. }

复制代码

竣事绘制会被父组件监听
src/views/Screen/WritingBoardTool.vue

1. // 每次绘制完成后将绘制完的图片更新到数据库
2. const hanldeWritingEnd = () => {
3.   const dataURL = writingBoardRef.value!.getImageDataURL()
4.   if (!dataURL) return
6.   db.writingBoardImgs.where('id').equals(currentSlide.value.id).toArray().then(ret => {
7.     const currentImg = ret[0]
8.     if (currentImg) db.writingBoardImgs.update(currentImg, { dataURL })
9.     else db.writingBoardImgs.add({ id: currentSlide.value.id, dataURL })
10.   })
11. }

复制代码

将绘制的内容存储到数据库中，切换幻灯片的时候，会查察当前幻灯片有没有对应的绘制字迹

1. // 打开画笔工具或切换页面时，将数据库中存储的墨迹绘制到画布上
2. watch(currentSlide, () => {
3.   db.writingBoardImgs.where('id').equals(currentSlide.value.id).toArray().then(ret => {
4.     const currentImg = ret[0]
5.     writingBoardRef.value!.setImageDataURL(currentImg?.dataURL || '')
6.   })
7. }, { immediate: true })

复制代码

② 自动放映

自动放映的方法在这里：src/views/Screen/hooks/useExecPlay.ts

1. // 自动播放
2. const autoPlayInterval = ref(2500)
3. const autoPlay = () => {
4.   closeAutoPlay()
5.   message.success('开始自动放映')
6.   autoPlayTimer.value = setInterval(execNext, autoPlayInterval.value)
7. }

复制代码

execNext() 方法咱们以前见过，就是下一张的方法。可以看到自动放映就是每隔固定时间执行下一张的方法
③ 循环放映

1. // 循环放映
2. const loopPlay = ref(false)
3. const setLoopPlay = (loop: boolean) => {
4.   loopPlay.value = loop
5. }

复制代码

循环播放通过 loopPlay 控制。
在执行 execNext() 方法的时候，如果执行到末了一张幻灯片，就会需要判定是否是循环放映模式，如果是，就将幻灯片从头开始，

1. const execNext = () => {
2.   if (formatedAnimations.value.length && animationIndex.value < formatedAnimations.value.length) {
3.     runAnimation()
4.   }
5.   else if (slideIndex.value < slides.value.length - 1) {
6.     slidesStore.updateSlideIndex(slideIndex.value + 1)
7.     animationIndex.value = 0
8.     inAnimation.value = false
9.   }
10.   else {
11.     // 如果循环播放，则切换到第一页
12.     if (loopPlay.value) turnSlideToIndex(0)
13.     else {
14.       throttleMassage('已经是最后一页了')
15.       closeAutoPlay()
16.     }
17.     inAnimation.value = false
18.   }
19. }

复制代码

④ 查察所有幻灯片

点击“查察所有幻灯片”时，会显示 src/views/Screen/SlideThumbnails.vue 组件，页面就变成如许了

不过这页面可以看出来挺简朴的，点击某一张幻灯片的时候，会进入目标幻灯片的放映模式

1. const turnSlide = (index: number) => {
2.   props.turnSlideToIndex(index)
3.   emit('close')
4. }

复制代码

src/views/Screen/hooks/useExecPlay.ts

1. // 切换幻灯片到指定的页面
2. const turnSlideToIndex = (index: number) => {
3.   slidesStore.updateSlideIndex(index)
4.   animationIndex.value = 0
5. }

复制代码

触发 close 方法，就是潜伏这个 SlideThumbnails 组件

1. @close="slideThumbnailModelVisible = false"

复制代码

2、演讲者视图

① 画笔

画笔跟上面的画笔工具是一个组件，由此可知组件化的告急性，功能复用多么方便！

② 激光笔

设置成激光笔模式的时候，内容地域会增长一个类名

1. <div
2.   class="slide-list-wrap"
3.   :class="{ 'laser-pen': laserPen }"
4.   ref="slideListWrapRef"
5. >

复制代码

是用来设置 cursor 属性的，显示成一个小圆点，是通过base64设置的，代码太长了我就不粘贴了

然后激光笔似乎没有别的作用了，就是让鼠标更明显一些。
③ 计时器

计时器会显示这么一个小组件

src/views/Screen/CountdownTimer.vue
表现分和秒的两个小框框是由不可编辑的 input 框组成

1. <input
2.   type="text"
3.   :value="fillDigit(minute, 2)"
4.   :maxlength="3" :disabled="inputEditable"
5.   @mousedown.stop
6.   @blur="$event => changeTime($event, 'minute')"
7.   @keydown.stop
8.   @keydown.enter.stop="$event => changeTime($event, 'minute')"
9. >

复制代码

开始计时的时候，会设置计时器

1. const start = () => {
2.   clearTimer()
4.   if (isCountdown.value) {
5.     // 倒计时
6.     timer.value = setInterval(() => {
7.       time.value = time.value - 1
9.       // 倒计时结束 重置计时器
10.       if (time.value <= 0) reset()
11.     }, 1000)
12.   }
13.   else {
14.     // 计时
15.     timer.value = setInterval(() => {
16.       time.value = time.value + 1
18.       // 计时超过36000秒 暂停计时器
19.       if (time.value > 36000) pause()
20.     }, 1000)
21.   }
23.   inTiming.value = true
24. }

复制代码

至于分钟和秒数的盘算，都是根据 time 盘算出来的。

1. const time = ref(0)
2. const minute = computed(() => Math.floor(time.value / 60))
3. const second = computed(() => time.value % 60)

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。