在线幻灯片制作小程序

JMx

2020-05-06

程序介绍

Impress.js之初识

     闲暇之余，接触到了impress.js，一个web端制作炫酷幻灯片的js库。使用方式也很简单，只需要在html文件中引入impress. js和impress.css，然后编辑html内容，添加相应的类名，即可由impress自动生成幻灯片效果。

    Impress.js利用CSS3 3D技术，赋予了每一张幻灯片：三维空间坐标 ，关于三个对称轴的旋转角度，以及缩放大小等属性，从而达到幻灯片犹如放在三维空间中的效果。此外，相邻幻灯片之间的切换实际上是三维空间的变换，加之以过渡效果，使得幻灯片非常的酷炫。下图是官网实例

设计之初衷

    正如前面所言，为了产生3D效果，我们需要给每一张幻灯片添加空间属性。那么我们希望实时的看到修改效果，因此我们就制作了这样的一个可视化工具，使修改属性后，实时看得见，便于修改。如下图所示，我们只需要更改相应幻灯片的空间属性，然后幻灯片会实时的变化。

幻灯片属性面板

编辑利器之Quill

    有了前面的幻灯片空间属性可视化修改，我们自然考虑到添加幻灯片内容可视化编辑。然后我们遇见了Quill，一个富文本编辑利器。如下图所示

    Quill不仅支持工具栏自定义，而且还可以使用各种插件，这为编辑复杂的幻灯片提供了可能。

其他依赖库

    除了Impress.js和Quill.js，我们还在quill中使用了图片调整插件quill-image-resize-module，quill-image-drop-module，代码高亮插件highlight.js，页码和播放进度插件yalishizhude；界面设计使用了Bootstrap UI库；数学公式渲染使用了KaTeX，MathJax。

使用说明

程序目录结构

首先下载程序，解压后目录如下图所示

其中

•  css/文件夹下为程序样式表。
•  js/文件夹下为程序主要代码。
•  image/文件夹为本地图片库。
•  video/文件夹为本地视频库。
•  index.html文件为初始幻灯片。

该文件夹是幻灯片运行的基础环境。

使用环境与文件保存

•   本程序仅在Opera和Chrome浏览器上进行了测试，因此我们建议使用高版本Chrome内核浏览器。
•   幻灯片保存至浏览器默认下载位置，需要用户手动复制到前面提到的基础环境目录下，使用浏览器打开即可编辑和演示。每一个幻灯片文件自成一体。
•   编辑幻灯片时，可以插入本地或者网络图片/视频，本地图片/视频必须放置在基础环境中的image/video文件夹下。
•   数学公式功能请参看[4]支持的数学公式环境。注意，行内公式不需要加"$"符号。

快捷键

全局快捷键

•   Alt + E： 打开/关闭编辑框。
•   Alt + T： 打开/关闭空间属性框。
•   Alt + S： 保存文件。
•   F4： 进入/退出全屏。
•   点击任一个幻灯片，都会聚焦该幻灯片。

打开编辑框后快捷键

•     Alt + C：插入代码块。
•   Alt + L： 插入链接。
•   Alt + P： 插入图片。
•   Alt + V： 插入视频。
•   Alt + M： 插入公式。
•   Alt + I： 插入幻灯片
•   Alt + R： 移除幻灯片。
•   Alt + ↑ / ↓：切换幻灯片。
•   Alt + ←/→： 切换对齐方式。
•   Ctrl + B：粗体。
•   Ctrl + I：斜体。
•   Ctrl + U：下划线。
•   双击公式：重新编辑。
•   点击链接：重新编辑网址。

打开空间属性框后快捷键

•  Alt + ↑ / ↓ ：切换幻灯片。

参考资料

1.   Impress.js官方文档。  
2.   Quill.js官方文档。   
3.   页码与进度条。
4.   KaTeX支持环境列表。
5.   修改quill默认字体。