【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

相关推荐
ideaout技术团队10 小时前
leetcode学习笔记2:多数元素(摩尔投票算法)
学习·算法·leetcode
十铭忘11 小时前
Bug——PaddleX人脸识别报错:Process finished with exit code -1073741819 (0xC0000005)
学习·bug
less is more_093012 小时前
风力发电机输出功率模型综述
笔记·学习·数学建模
丰锋ff12 小时前
2006 年真题配套词汇单词笔记(考研真相)
笔记·学习·考研
带娃的IT创业者13 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
非凡ghost14 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_110614 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
洛可可白15 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
想唱rap15 小时前
直接选择排序、堆排序、冒泡排序
c语言·数据结构·笔记·算法·新浪微博
早睡冠军候选人15 小时前
K8s学习----节点(Node)
运维·学习·云原生·容器·kubernetes