关于我用Excalidraw制做手绘风ppt记录(五)
📝2876 个字
 | ⌛要看完怎么也得7分钟吧
链接汇总
Excalidraw官网:https://excalidraw.com/
Excalidraw官方开源仓库:https://github.com/excalidraw/excalidraw
Excalidraw Animate官网:https://dai-shi.github.io/excalidraw-animate/
Excalidraw Animate官方开源仓库:https://github.com/dai-shi/excalidraw-animate
Excalidraw Smart Presentation官网:https://excalidraw-smart-presentation.github.io/
Excalidraw Smart Presentation官方开源仓库:https://github.com/excalidraw-smart-presentation/excalidraw-smart-presentation.github.io
本人魔改版Smart Presentation:https://excalippt.fantasydm.top
本人魔改版Smart Presentation开源仓库:https://github.com/Fantasy-Dm/excalidraw-smart-presentation
前景提要:
- 书接上回,为了实现用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仓库上,有需要的小伙伴可以直接按需自取😆。如果使用上有啥问题的话,大伙也可以不必客气,直接留言即可,我看到了也会尽可能提供帮助😎。最后,感谢能看到这里的小伙伴,这次更新的系列有点长,能坚持阅读所有内容的小伙伴,都祝你拥有个美好的未来✨✨!