关于我用Excalidraw制做手绘风ppt记录（五）

前景提要：

• 书接上回，为了实现用Excalidraw整一份手绘风的ppt这一伟大目标，咱们先是简单介绍了一下Excalidraw工具，之后又介绍了一下在社区上找到的，Excalidraw Animate和Excalidraw Smart Presentation两个插件。得益这俩插件强大的功能特性，咱们已经能够实现用Excalidraw，制作一些简单的动画和演示用ppt。但如果是想制作一份内容相对完整的ppt，光是目前这两个插件提供的功能，仍然存在一些不尽人意的地方🤔。
• 因此秉持着既然要整，就得尽全力整的中心思想，俺决定撸起袖子自己干💪，哪里的功能用着不顺心，那就看看能不能自己魔改对应的功能模块。也是得益于Excalidraw Smart Presentation的开源支持，咱们能非常容易地获得到插件对应的源码，再配合上俺的俺寻思之力，魔改事业上可以说是进行的非常如鱼得水😎。于是为了发扬Excalidraw Smart Presentation作者的开源精神，俺也决定写下这份小作文，希望未来有需要的小伙伴，可以同样收获这份喜悦🌠。
• 那么在之前的篇幅里面，咱们已经介绍了两大部分的魔改内容。首先为了让自动生成的动画更加贴合手绘风这一主题，俺通过魔改代码，成功优化了文字和自由绘制元素的动画展现🛠️。在这之后，又提到了为了减少演示的过程中的重复操作，俺又通过利用Excalidraw的编组功能，成功实现了动画的自动播放。然后又为了保持演示内容的静态可读性，把Excalidraw的箭头元素，也纳入了流程控制的一环，使控制画框的播放顺序，变的更加灵活，同时也保证了静态画布的可读性，可以说是一举两得🌟。
• 除了以上的修改内容以外，俺还保留了一些修改内容未介绍，本篇应该就继续之前的进度，介绍一下剩下的魔改内容。

演示画布操作优化：

• 演示时鼠标操作优化：

  • 相信在传统的ppt演示过程中，一定有不少人遇到过，在一张ppt内放下若干张图片，结果放映的时候受限于屏幕大小，可供显示图片的区域也一起被压缩，最终导致无法看清图片的具体内容。尤其是图片中包含文字时，这个问题尤为明显💦。
  • 那么过去的时候，如果遇到了这种情况，其实也没啥特别合适的解决方式。就我个人而言，以前做ppt的时候，可能时间比较充裕的情况下，会对每张图片，单独制作一个点击触发的缩放动画。因此在实际演示的过程中，可以根据需要随时点击看不清的图片，勉强可以解决这个问题。但带来问题就是制作成本的提升，这也是为啥现在不喜欢制作传统ppt🤡。当然还有最简单的方式，就是结束放映，脱离ppt本身，直接本地打开目标图片。绝对能解决问题，就是对演示的流程存在一定的割裂性。而且对俺来说，这种方式一点也不优雅🍵。
  • 那么有没有办法，能用Excalidraw Smart Presentation顺便解决一下这个千古难题呢？诶，答案是意外可行的🌈！这就不得不又吹一遍Excalidraw的强大了！可能眼尖的小伙伴，已经注意到了，Excalidraw Smart Presentation的放映过程，其实仍然还是原生的Excalidraw画布。只不过是把所有的工具都隐藏起来了，并且根据播放流程和画框信息，自动调整缩放尺寸和画布内容。诶嘿，这就是关键所在了！既然就是原生的Excalidraw画布，那自然就支持原生的画布操作，什么拖拽位移缩放等，肯定都是不在话下！再配合Excalidraw元素的无损缩放算法，只要原图足够清晰，不管怎么调整缩放都不会影响最终实现效果！💯
  • 没错，其实Excalidraw Smart Presentation在放映过程，是故意把所有的键盘和鼠标的操作都屏蔽掉了，同时添加了两个占满屏幕的大按钮。对，咱们在控制幻灯片前进后退时，其实就是在点击对应位置的按钮。因此咱们这个优化实现起来就非常简单，只要去掉所有的操作屏蔽，同时隐藏掉原本的两个全屏大按钮，剩下了自然就是Excalidraw的画布本体了！
  • 给大伙直接看最终的实现效果吧，没想到PPT一直存在的千古难题，一不小心也被咱轻易解决了，不得不再感叹一次Excalidraw的伟大！👍

• 新增演示流程控制按钮：

  • 有了上面的修改，咱们现在在演示时，也能使用原生Excalidraw画布的所有操作方式。但相对的，为了实现这个效果，咱们废弃了全屏的流程控制按钮，也就是咱们无法通过点击实现切换幻灯片。不过好在Excalidraw Smart Presentation本身除了点击以外，也同时支持键盘方向键操作，这从上面的演示视频里面也能看出来，实际是键盘在控制切换幻灯片。
  • 虽然就目前来看，其实就用键盘也没啥大问题。但考虑到鼠标点击，也拥有其存在的道理。所以既然无法使用全屏的大按钮，不如咱们直接在不影响操作的地方，单独增加两个迷你版本的控制按钮。这样既能保留原本的鼠标操作，也能不影响咱们进行画布操作。同时为了整体风格能保持手绘风，顺手就给这俩按钮也添加一些小小的风格化设计😎。
  • 同样，让我直接看看最终实现的效果吧。

• 新增画布重置功能：

  • 因为这次完全开放了Excalidraw的原生画布操作，除了导致流程控制上失去了原本的全屏大按钮，其实还带来了一个新问题。因为画布始终只存在一份，所以当前分页对画布的所有变换操作，都会继承到后续演示的分页上，这不仅影响可读性，也无疑是对强迫症一个严峻的考验。因此为了不让自己在演示过程中，为了调整画布的位置和大小，抓耳挠腮大眼瞪小眼，还是有必要增加个重置画布到初始状态的功能。
  • 因为具体修改内容相对简单，所以就不再额外赘述铺垫了，咱们直接看最终效果！

适配视频和Gif动图：

• 其实综合目前为止所有的修改，咱们无非就是在原有的基础上，针对手绘风这个属性，进行一些锦上添花的优化。但关键对于一个完整的ppt来说，不说动图，至少视频是肯定会用到的元素。因此哪怕是受限于Excalidraw，咱们也得看看有没有啥途径，能够突破这堵最后的高墙🔥。
• 就像之前的描述的那样，因为Excalidraw本质只是个网页，同时受限于体量问题，不可能允许直接上传视频文件。但咱们毕竟现在是在本地魔改Excalidraw Smart Presentation，所以在存储压力这块，其实没有这方面的限制。反正都是本地服务器，想怎么存储怎么存储。
• 但就算解决了存储问题，这里面仍然存在另一个问题，就是Excalidraw就不存在能播放或者上传视频的元素。所以要解决这个问题咱们还得从0开始造轮子，这无疑是一种耗时耗力的体力活。那就有没有办法，能够用一种简单的办法解决这个问题呢？
• 诶嘿，对咯，既然存在这份小作文，那说明还真让我找到了一个，不费吹灰之力的方法。其实还是得益于Excalidraw的强大，如果大伙用Excalidraw用的比较深度的话，肯定知道预制的工具除了画框，还有个相对不显眼的工具。对，就是网页嵌入工具💡！
• 既然咱们没法直接在Excalidraw里面上传播放视频，那咱们换个思路。索性直接脱离Excalidraw，搭个简易的视频播放网页，然后利用网页嵌入工具嵌入到Excalidraw里面。由此一来，不需要任何复杂的修改，轻松适配了视频播放这一功能。而gif其实也是同理，无非就是把原来播放视频的网页，改写成播放gif的网页。
• 可能有的小伙伴对这个重新搭个网页不是很理解，这岂不是更加复杂了😧？其实不是，毕竟咱们只是用来播放指定的视频，所以本身不需要特别复杂的功能逻辑，只要一些简单的解析和布局逻辑即可完成。当然毕竟俺也算是小有基础，对完全没有基础的小伙伴，可能还是非常具有挑战性🤔。诶，不要害怕不要哭，你可以直接用俺的😎！而且毕竟都2025年了是吧，再不济你也可以直接让AI给你写个，反正也就自己用，不需要改BUG不是🤪。
• 嘛，说了这么多，可能有的小伙伴已经迫不及待了，咱们直接来欣赏最后的成果吧！

总结：

• 到此为止，个人认为现有的所有功能，基本已经足够满足我，用Excalidraw制作一份手绘风ppt的所有需求。所以也就意味着，这个系列至此也就到一段落🎉。就像之前提到的那样，写本篇小作文的目的，除了是在利用摸鱼时间，记录本次制作的心路历程以外，同时也是为了继续发扬开源共享的精神，所以我也把我目前使用版本的源代码，放到了本人的Github仓库上，有需要的小伙伴可以直接按需自取😆。如果使用上有啥问题的话，大伙也可以不必客气，直接留言即可，我看到了也会尽可能提供帮助😎。最后，感谢能看到这里的小伙伴，这次更新的系列有点长，能坚持阅读所有内容的小伙伴，都祝你拥有个美好的未来✨✨！