图形编辑器：底层设计大家好，我是前端西瓜哥，今天随便聊点。一个图形编辑器分三层，自底向上为：渲染引擎编辑器内核 U

大家好，我是前端西瓜哥，今天随便聊点。

一个图形编辑器分三层，自底向上为：

渲染引擎可以用开源的，比如：

或者自己写。

它们封装程度不同，是底层的一层比较浅的封装，和业务无关。通常需要维护一棵树，像 dom 一样支持属性和层级的修改，支持事件、动画等。

底层通常是 Canvas 2d 和 WebGL 封装，有些渲染器还支持 WebGPU。

内核

编辑器内核 core，就是根据图形编辑器自身的业务进行开发。

常见的业务有：

内核其实和渲染引擎是有部分重合的。有些能力可放渲染层可放内核，比如左对齐右对齐功能，可以放到渲染引擎中作为一个工具方法，你把它放内核中也行。

因为 内核是渲染引擎的扩展，只是通常要实现渲染能力无关的一些功能，比如历史记录。

UI 层。用户通过一些交互去调用编辑器内核的 api。

比如一个矩形绘制工具按钮，点击它，给 core 的工具管理对象的当前工具设置为矩形绘制工具。

UI 层是需要和编辑器内核解耦的。这样使用者就可以用任何想要的ui框架，比如React、Vue。它们只要维护好 core 实例，调用它的 api 就好。

我是前端西瓜哥，欢迎关注我，学习更多前端知识。

然后这三层内部可以继续细化，比如 UI 层可以再分一个通用组件库出来，内核中分化出一个 data-model 出来。