项目组零基础转做前端，类似一个在线的可交互 PPT，求助思路

[WangLiCha]

我们项目组之前是做 WPF 开发的，之前一直在 WPF 做一个类似 PPT 的软件，但是播放中有更强的交互性（具体可以参考下面的 gif ），然后最近根据新的需求，我们需要把播放部分的功能做一个在线网页版，然后就只能全员转前端硬着头皮上了。

目前头疼的就是，之前用 WPF 做的时候，我们实现了各种 PPT 的底层操作功能，包括画布上对象的展示，选择，框选，缩放变形等等，现在要想把这套逻辑移到 Web 上就发现无处着手。虽然.NET 有 Blazor 这种东西，但是考虑到凡是涉及到 WPF 的代码都没法复用，所以实际做起来还是很棘手。虽然有 konva 之类的 canva 库可以实现类似的功能，但是实际需求中我们画布上的对象是有一定的交互操作的，所以很多 canvas 库已经实现的底层操作逻辑我们也没法拿过来使用。下面放了张 gif 展示了一下应该达到的效果，用 F12 可以发现它至少确实不是基于 canvas 库，而是都是在操作 DOM 的。

现在的问题就是，要实现这样的功能，应该从什么地方着手，用什么库或者说用什么技术？目前我们确实是没有什么比较好的思路。难道只能完全从零造轮子吗，公司给的时间只有半年……

[kev1nzh]

这一套底层功能基本都用 web 原生的就行，可以加点方便操作的库然后直接造吧，应该挺简单的。

[WhateverYouLike]

同问，目前也需要一些思路指点

[fayetitus]

类白板需求一般确实是用 canvas 硬造的，主流是上 fabricjs
但全员 0 前端基础半年转是不是太紧了

[WangLiCha]

@kev1nzh 这方面的库大概有哪些？毕竟前端的生态我们都不是很熟……

[jones2000]

canvas 移植一下不就行了， 不难。

[miv]

看看鲁班 h5 这个项目有没帮助

[WangLiCha]

@fayetitus canvas 很难做到嵌入可交互的组件或者说音视频之类的吧，gif 里的也是用 web 原生做的，只在最底下放了一层 canvas 用来处理笔的绘制

[rabbbit]

比较知名的有 pixijs fabric.js Three.js
问题是项目复杂程度? 要做到 figma 这种估计有点难.

[ZSeptember]

搜索
open source ppt online

找到了几个库：revealjs ，Impress.js
等，好像还带了协作功能

半年不太可能实现，web 还需要后端配合，这个也不简单。

[fayetitus]

@WangLiCha 图里的拖拽旋转缩放笔的绘制之类都是 fabric.js 的场景，它也提供了一套事件系统，可以拿去肝你说的那些交互。不过这东西最大的问题文档很烂……
音频和 canvas 没啥关系，视频倒是可以从 canvas 出。
不过当然也没必要纯 canvas ，看情况有些需求可以在 canvas 上面套 DOM 。
更好的做法应该是类 figma 的办法，wasm 出到 canvas 上

[2055]

可以用 pixijs 做底层渲染，视频也是支持的。交互操作自己封装一下就行

[WangLiCha]

@fayetitus 那比如说图里有插入图表，图表可以 hover 查看具体数值，这个可以在里面放一个 echarts 之类的东西来做吗？还是说只能自己用 fabric.js 的 API 来自己造个轮子？顺带问一下，fabric.js 和 konva 相比怎么样？如果考虑到对 typescript 的适应性的话？

[leonkfd]

https://github.com/pipipi-pikachu/PPTist

这个可能会对你有所启发，国人基于 Vue3 开发的在线 PPT

[fayetitus]

@WangLiCha 包一下两个一起用吧，搜了搜就有类似 echarts-fabric 这样的库
至于对比 fabric 和 konva ，毕竟你们自己的项目，谷歌搜搜嘛

[hoodjannn]

@leonkfd 哇 这个看起来挺不错耶

[Oceanhime]

看起来像希沃白板...

[rogerer]

@WangLiCha 应该可以把 HTML 对象渲染到 canvas 里，这种轮子比较多。

[cairnechen]

我还以为说的是 prezi

[YuTengjing]

欢迎使用稿定设计

[driven]

我做过,可以 v 联系我 ZHJpdmVuMjE2MQ==