关于如何做画板，进行了调研。

https://www.zhihu.com/question/348541272/answer/914631091

如何做个类似figma的2d渲染引擎？

某年某月某日从某个UI设计朋友了解到figma这款基于浏览器的跨平台原型设计软件，引起了我极大的关注。 200625 核心能力：画板调研 - 图1 我也非常有兴趣在浏览器中实现一个简单的2d渲染引擎，并且我从他们的开发者博客中了解到：figma使用了wasm技术，渲染引擎使用c++编写（好像使用了skia库和一些字体渲染的库，所以他们可能并没有实现的那么底层）。 链接：https://www.figma.com/blog/building-a-professional-design-tool-on-the-web/ 个人才疏学浅，刚读大三，目前也只有一个想法而已，完全不知道从何开始，也很清楚这一定很复杂，所以想请教一下有相关经验的知友们： 1.skia只是个画图工具而已，如何有有序的去渲染每个元素？（元素的渲染层级关系） 2.是否可以参考浏览器的渲染方式？ 3.如何实现交互？举个例子：我鼠标点击canvas上的某个区域，怎么判断是否点击到了某个元素？

如果可以的话，求一些参考资料

作者：不知语冰 链接：https://www.zhihu.com/question/348541272/answer/914631091 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

  • Skia 只是底层的图形渲染库，要像设计工具那样，你需要做自己的图层模型（就像是 DOM 一样），和布局（layout）引擎。
  • 是的，不过现代浏览器的架构有点复杂，你可以看看 Nidium 或者 skui ，前者用 Skia 实现了基本的 HTML 和 CSS 布局和渲染。
  • 这个不是渲染引擎的活。要做事件系统，当你有了图层模型 和 layout 引擎就好办了，你可以知道点击的坐标涉及那些图层或者说是元素（矩形范围 ），然后要按图层顺序依次判断各个图层这个坐标的像素是否为透明，非透明就算是点到这个图层了，（设计工具和一般 GUI 的事件系统还不一样，前者可以按形状直接计算，后者要考虑投影、模糊、位图、滤镜，所以得到渲染结果里取像素）。

如果你要做一个“类似”于 figma 的单纯的渲染系统，现在比 figma 当年开发时要简单不少
Skia 现在有官方的 WebAssembly 绑定 canvaskit，你可以按照 Skia 的 API 在浏览器端用 JavaScript 像使用 Canvas 一样使用 Skia。当然比起 figma 那样全都在 WebAssembly 完成的渲染系统，性能没那么高，玩一玩还是够了。

布局、合成、渲染，事件机制、图层模型（DOM）、样式模型（CSS），到最后你会发现，你是在浏览器里实现了一个小浏览器

在 Figma CTO 的文章里，我基本了解了 Figma 的画布是如何实现的。

  • 使用 WebGL 作为渲染引擎
  • 使用 C++开发并变成 WebAssembly 跑在 Web 端

我个人认为其中的核心是使用 WebGL 作为渲染引擎，因为 WebGL 是使用 GPU 进行渲染的，整个运算速度能够快到飞起。所以如果用 Js 技术栈去实现一个 Figma，其中的核心能力之一：画布，必须要有好的 WebGL 类库支持。
所以第一件最重要的事情是调研 WebGL 下有哪些可用的渲染类库。

通过以下几篇文章，对这块有了个基本了解：

pixi被定义为一个高性能渲染库，没有动作系统、物理系统，没有针对游戏开发的编辑器，没有友好的入门文档，学习成本高，将之作为基础建立自己的体系还可以，但需要很强的实力。

核心在于高性能渲染库，用于画布的研发就很合适。

所以基本上敲定了画布的核心能力开发使用 pixi.js 这个类库。
下一步就是要基本学习下 pixi.js 的用法，然后看看有没有 TS 支持等等。