某年某月某日从某个UI设计朋友了解到figma这款基于浏览器的跨平台原型设计软件，引起了我极大的关注。
我也非常有兴趣在浏览器中实现一个简单的2d渲染引擎，并且我从他们的开发者博客中了解到：figma使用了wasm技术，渲染引擎使用c++编写（好像使用了skia库和一些字体渲染的库，所以他们可能并没有实现的那么底层）。
个人才疏学浅，刚读大三，目前也只有一个想法而已，完全不知道从何开始，也很清楚这一定很复杂，所以想请教一下有相关经验的知友们：
1.skia只是个画图工具而已，如何有有序的去渲染每个元素？（元素的渲染层级关系）
2.是否可以参考浏览器的渲染方式？
3.如何实现交互？举个例子：我鼠标点击canvas上的某个区域，怎么判断是否点击到了某个元素？
如果可以的话，求一些参考资料
- Skia 只是底层的图形渲染库，要像设计工具那样，你需要做自己的图层模型（就像是 DOM 一样），和布局（layout）引擎。
- 是的，不过现代浏览器的架构有点复杂，你可以看看 Nidium 或者 skui ，前者用 Skia 实现了基本的 HTML 和 CSS 布局和渲染。
- 这个不是渲染引擎的活。要做事件系统，当你有了图层模型 和 layout 引擎就好办了，你可以知道点击的坐标涉及那些图层或者说是元素（矩形范围 ），然后要按图层顺序依次判断各个图层这个坐标的像素是否为透明，非透明就算是点到这个图层了，（设计工具和一般 GUI 的事件系统还不一样，前者可以按形状直接计算，后者要考虑投影、模糊、位图、滤镜，所以得到渲染结果里取像素）。
如果你要做一个 “类似” 于 figma 的单纯的渲染系统，现在比 figma 当年开发时要简单不少
Skia 现在有官方的 WebAssembly 绑定 canvaskit，你可以按照 Skia 的 API 在浏览器端用 JavaScript 像使用 Canvas 一样使用 Skia。当然比起 figma 那样全都在 WebAssembly 完成的渲染系统，性能没那么高，玩一玩还是够了。
布局、合成、渲染，事件机制、图层模型（DOM）、样式模型（CSS），到最后你会发现，你是在浏览器里实现了一个小浏览器
可以看看 ImGui。
对鼠标点击，键盘输入的响应方式就两种，一是使用轮询函数，每隔一段时间查询鼠标和键盘的状态，二是设置回调函数注册到操作系统让系统管理。
若有收获，就点个赞吧
0 人点赞
