【PPTist】公式编辑、插入音视频、添加动画

一、插入公式

点击公式的时候 latexEditorVisible 会变成 true
src/views/Editor/CanvasTool/index.vue

typescript 复制代码
<Modal
  v-model:visible="latexEditorVisible" 
  :width="880"
>
  <LaTeXEditor 
    @close="latexEditorVisible = false"
    @update="data => { createLatexElement(data); latexEditorVisible = false }"
  />
</Modal>

交互的方式:

1、直接输入 latex 公式

2、点击常用符号

3、点击预置公式

都可以自动生成公式预览

1、输入 latex 公式

输入公式的区域是一个自定义组件 src/components/TextArea.vue

输入公式后会触发 update:value 方法

typescript 复制代码
const handleInput = (e: Event) => {
  emit('update:value', (e.target as HTMLInputElement).value)
}
2、常用符号/预置公式

公式和符号的默认值的定义在 src/configs/latex.ts

符号点击的时候触发下面的方法,将符号追加到 latex 的最后

typescript 复制代码
const insertSymbol = (latex: string) => {
  if (!textAreaRef.value) return
  textAreaRef.value.focus()
  document.execCommand('insertText', false, latex)
}

而公式点击的时候,直接重置 latex 公式 @click="latex = item.latex"

3、公式预览

公式预览组件:src/components/LaTeXEditor/FormulaContent.vue

使用到了 hfmath 将 latex 转成 svg

使用示例:

typescript 复制代码
new hfmath(
  `f(x)=
    \\frac{1}{2\\sqrt{2\pi} }
    e^{-\\frac{1}{2}(\\frac{x-\\mu}{\\sigma})^2}`
).svg();

会监听 latex ,随时更新公式预览

typescript 复制代码
watch(() => props.latex, () => {
  const eq = new hfmath(props.latex)
  pathd.value = eq.pathd({})
  box.value = eq.box({})
}, { immediate: true })

二、插入音视频

插入音视频的功能有点简单,不能上传本地文件,只能粘贴一个链接

视频组件:src/views/components/element/VideoElement/index.vue

主要的播放是靠这个

typescript 复制代码
<video
  class="video"
  ref="videoRef"
  :src="src"
  :autoplay="autoplay"
  :poster="poster"
  webkit-playsinline
  playsinline
  @durationchange="handleDurationchange()"
  @timeupdate="handleTimeupdate()"
  @ended="handleEnded()"
  @progress="handleProgress()"
  @play="autoHideController(); paused = false"
  @pause="autoHideController()"
  @error="handleError()"
></video>

如果要上传本地的文件的话,应该要先上传到服务端,然后给一个服务器上的地址,放到 video 标签里

三、添加动画

来看一下这个炫酷的动画的效果是怎么实现的吧

选择动画的组件是 src/views/Editor/Toolbar/ElementAnimationPanel.vue,点击动画的时候会指定的方法:

typescript 复制代码
// 添加元素动画,并执行一次预览
const addAnimation = (type: AnimationType, effect: string) => {
  if (handleAnimationId.value) {
    updateElementAnimation(type, effect)
    return
  }

  const animations: PPTAnimation[] = JSON.parse(JSON.stringify(currentSlideAnimations.value))
  animations.push({
    id: nanoid(10),
    elId: handleElementId.value,
    type,
    effect,
    duration: ANIMATION_DEFAULT_DURATION,
    trigger: ANIMATION_DEFAULT_TRIGGER,
  })
  slidesStore.updateSlide({ animations })
  animationPoolVisible.value = false
  addHistorySnapshot()

  setTimeout(() => {
    runAnimation(handleElementId.value, effect, ANIMATION_DEFAULT_DURATION)
  }, 0)
}

如果当前元素已经有自己的动画,就会执行 updateElementAnimation(),更新元素的动画。

如果是新增动画,就执行 slidesStore.updateSlide({ animations }),将动画的数据存到当前幻灯片中,并且会执行一次动画预览。看下怎么执行动画预览的

typescript 复制代码
// 执行动画预览
const runAnimation = (elId: string, effect: string, duration: number) => {
  const elRef = document.querySelector(`#editable-element-${elId} [class^=editable-element-]`)
  if (elRef) {
    const animationName = `${ANIMATION_CLASS_PREFIX}${effect}`
    document.documentElement.style.setProperty('--animate-duration', `${duration}ms`)
    elRef.classList.add(`${ANIMATION_CLASS_PREFIX}animated`, animationName)

    const handleAnimationEnd = () => {
      document.documentElement.style.removeProperty('--animate-duration')
      elRef.classList.remove(`${ANIMATION_CLASS_PREFIX}animated`, animationName)
    }
    elRef.addEventListener('animationend', handleAnimationEnd, { once: true })
  }
}

从代码中可以看到,动画通过 animate 实现。这么一看好像也挺简单的(嚣张.jpg)🌝🌝🌝

动画的样式都在这里:
node_modules/animate.css/animate.css

相关推荐
码视野23 分钟前
物联网软件开发与应用方向应该怎样学习,学习哪些内容,就业方向是怎样?(文末领取整套学习视频,课件)物联网硬件开发与嵌入式系统
物联网·学习
文城5211 小时前
HTML-day1(学习自用)
前端·学习·html
漂亮_大男孩1 小时前
深度学习|表示学习|CNN中的Layer Normalization | 25
人工智能·深度学习·神经网络·学习·cnn
阿珊和她的猫2 小时前
Vue 和 React 的生态系统有哪些主要区别
前端·vue.js·react.js
偷光2 小时前
深度剖析 React 的 useReducer Hook:从基础到高级用法
前端·javascript·react.js
虾球xz2 小时前
游戏引擎学习第92天
python·学习·游戏引擎
linwq82 小时前
Java网络编程学习(一)
java·网络·学习
The_era_achievs_hero2 小时前
动态表格html
前端·javascript·html
Thomas_YXQ3 小时前
Unity3D Shader 简析:变体与缓存详解
开发语言·前端·缓存·unity3d·shader
2201_756942643 小时前
react入门笔记
javascript·笔记·react.js