写了一堆图形编辑器开发的文章，汇总一下，方便读者朋友在遇到问题时，快速找到对应文章，建议收藏。

我正在开发的 suika 图形编辑器：

https://github.com/F-star/suika

线上体验：

https://blog.fstars.wang/app/suika/

图形编辑器

如果你需要开发一款图形编辑器，下面这些文章应该能给你一些帮助。

• 《来，教你开发一款图形编辑器》，简单介绍实现图形编辑器需要实现的一些基础模块，重点是模块解耦。

• 《简单介绍一下我在做的图形编辑器》，个人开发的开源图形编辑器 suika 的简单介绍，里面有模块划分的思维导图，可能对你的整体架构有一点帮助。

• 《图形编辑器：适配高分辨率屏幕》，对于高分屏，Canvas 要特殊处理，否则会出现线条模糊的情况。

• 《图形编辑器：历史记录设计》，两种做法，快照和打补丁（patch），后者需要用到命令模式。

• 《图形编辑器：场景坐标、视口坐标以及它们之间的转换》，非常重要。

• 《图形编辑器开发：模块间如何通信？》，主动获取数据通过入口模块 editor 对象，被动拿到数据并执行方法使用发布订阅事件。

• 《图形编辑器开发：快捷键的管理》

• 《图形编辑器开发：实现图形的复制粘贴》

• 《图形编辑器开发：自定义光标》

• 《图形编辑器：标尺功能的实现》

工具模块

• 《图形编辑器：工具管理和切换》

• 《图形编辑器：防误操作之拖拽阻塞》

• 《图形编辑器开发：最基础但却复杂的选择工具》，选择工具非常复杂，承载了大量的功能，比如单选、框选、连选、移动、通过控制点修改图形属性。

• 《图形编辑器开发：基于相交策略选中图形》

• 《图形编辑器开发：绘制图形工具》，如何实现绘制图形的工具类，这里特指一次鼠标按下、拖拽然后释放，基于绘制的矩形区域，就完成绘制出一个图形（比如矩形、椭圆）的场景。

• 《简简单单实现画笔工具，轻松绘制丝滑曲线》

图形缩放（resize）

• 《图形编辑器开发：缩放和旋转控制点》，在选中图形上显示控制点，通过拖拽控制点进行缩放以及选择图形操作。图形用 x、y、width、height、rotation 表达。

• 《图形编辑器开发：为什么我选择用 transform 矩阵表达图形的变形？》

• 《图形编辑器开发：基于 transform 的图形缩放》，因为对图形属性做了改造，用 transform 替代 x、y、rotation，基于新的方案实现的对单个图形缩放。

• 《图形编辑器开发：基于 transform 对多个图形进行缩放》

• 《图形编辑器开发：实现选中图形的水平翻转和垂直翻转》

钢笔和画笔工具

• 《图形编辑器开发：钢笔工具功能说明书》，钢笔工具功能交互说明，理解这个有助于正确实现钢笔工具。

• 《图形编辑器开发：钢笔工具的实现》

• 《简简单单实现画笔工具，轻松绘制丝滑曲线》，绘制结束后，使用曲线拟合算法，将折线转换为曲线。

更新图形属性

• 《图形编辑器：旋转选中的元素》，通过旋转控制点旋转单个或多个图形。

• 《图形编辑器：修改图形x、y、width、height、rotation》，通过输入框修改

• 《Figma 的编组功能，比你想象的要复杂得多》

画布缩放

都是些几何算法推演，可以考虑用矩阵，更简单

• 《图形编辑器开发：以光标为中心缩放画布》

• 《图形工具的另一种以光标为中心缩放实现》，基于渲染引擎的缩放画布

• 《图形编辑器开发：缩放至适应画布》

吸附

• 《吸附设计：学会正确地贴贴》，各种吸附类型的介绍和实现，比如网格吸附、参考线吸附、极轴追踪等。

• 《图形编辑器开发：网格与网格吸附》

• 《图形编辑器开发：参考线吸附效功能，让图形自动对齐》，图形上的一组点要做参考线吸附，如何计算合适的对齐方式，以及渲染吸附成功后的参考线高亮。

UI 层相关

• 《图形编辑器开发：属性显示与格式转换》，数据层和 UI 层的属性有时候会不一样，典型例子就是弧度和角度，对此需要额外的转换处理。

• 《图形编辑器开发：实现自定义规则输入框组件》，实现上面一点，需要实现的一个底层通用组件。

性能优化

• 《图形遍历效率低？试试 R 树》，使用 R 树进行图形的快速索引，减少遍历次数，空间换时间。可用于图形框选、视口外图形剔除、图形点选等功能。

• 《Canvas 性能优化：脏矩形渲染》，只更新局部的矩形区域，而不是整棵树做重渲染，以提高性能。

编辑器与协同

• 《多人协同场景下，图形编辑器如何实现多人光标功能》

• 《使用 yjs 给图形编辑器加上多人协同编辑功能》

其他

• 《关于包围盒，你需要知道的那些事》，包围盒指的是包围图形的一个矩形盒子（不一定紧密包围），用于提高碰撞检测效率，是基础中的基础，需要掌握。

• 《如何在 Canvas 上实现图形拾取？》，两种方案：几何运算、像素颜色映射。

• 《图形编辑器开发：加新的图形类型，触发丝滑小连招》，本文讲述了当我们要增加一个新的图形类型时，要做的一系列工作，以及一些注意事项。编辑器的功能越多越复杂，要做的工作就越多。

• 《图形编辑器：绘制图形需要用到的填充算法》，容器填充算法。

• 《图形编辑器：排列移动功能的实现》

• 《图形编辑器：对齐功能的实现》

• 《图形编辑器：图形和辅助线绘制的坐标问题》

• 《图形编辑器开发：是否要像 Figma 一样上 wasm》，对于是否要使用 WASM 实现图形工具的思考

• 《图形编辑器开发：颜色 hex 标准化》

Figma 技术调研

Figma 作为顶流的 Web 端图形编辑器，且团队有不少公开的技术分享资料，非常值拿来研究学习。

1. 《什么？Figma 的 fig 文件格式居然解析出来了》，fig 格式介绍和解析，另外推荐 Figma-To-JSON 开源 fig 解析生成工具

现在推荐 Figma CTO 写的 fig 解析工具，解析更完整：

https://madebyevan.com/figma/fig-file-parser/

2. 《剖析 Figma 图形对象的基本属性》

3. 《学到了！Figma 原来是这样表示矩形的》，Figma 的图形支持 transform 变换，以实现斜切功能，兼容 SVG。

4. 《剖析 Figma 数据结构：不同图形的特有属性》

5. 《Figma 数据结构：容器类图形的属性》

6. 《Figma 的画布缩放功能说明》

7. 《浏览器没有鼠标连击事件，那我们自己造》

8. 《Figma 的编组功能，比你想象的要复杂得多》，修改某个节点，可能要更新整棵树的 width、height、transform，但也基于此实现了一种特别的 R 树。

9. 《Figma，你都复制了些什么东西？》，尝试解读在 figma 中复制图片产生的数据的含义。

CRDT 协同编辑算法

在分布式计算中，无冲突复制数据类型（CRDT，全称 Conflict-free replicated data type）是一种可以在网络中的多台计算机上复制的数据结构，副本可以独立和并发地更新，而不需要在副本之间进行协调，并且在数学上总是可以解决可能出现的不一致问题。（来自维基百科）

1. 《这一次，彻底搞懵 CRDT》，CRDT 入门文章。

2. 《CRDT 协同编辑：如何确定操作时序？》，使用逻辑时钟表达因果关系。

3. 《Figma 是如何做协同编辑的？》Figma 使用了类 CRDT 协同编辑方案。

4. 《Figma 在协同编辑中使用的顺序一致性算法：Fractional indexing》同层级图形在协同后，如何保证最终顺序一致，这里利用了两个浮点数之间可以不断二分拿到中间索引的方式，用 sortIndex 属性给同层级图形排序，但要注意精度耗尽的问题。

5. 《CRDT 协同编辑：另一种顺序一致性算法 Tree-Based Indexing》，基于树的顺序一致性算法，相比 Fractional indexing 要复杂不少，但能规避精度耗尽问题。

6. 《CRDT 协同编辑：修改树的节点层级 Mutable Tree Hierarchy》

平面几何算法

实现几何算法是很好玩的事情，有点像 LeetCode 刷题。

有时候需要写一些简单可视化交互来辅助验证正确性，尤其是复杂算法。

1. 《图形编辑器开发：一些会用到的简单几何算法》

2. 《平面几何：求向量 a 到向量 b扫过的夹角》，经常用到，比如基于 transform 计算一个图形的旋转角度；

3. 《在容器内显示图片的五种方案：contain、cover、fill、none、scale-down》，图片填充到矩形容器，缩放画布会用到。

4. 《几何算法：判断两条线段是否相交》

5. 《解析几何：计算两条线段的交点》

6. 《几何算法：矩形碰撞和包含检测算法》

7. 《平面几何算法：求点到直线和圆的最近点》

8. 《平面几何题解：C 在 AB 的垂线的哪一侧》

9. 《给定一个边与边可能相交的多边形，求它的轮廓线》，一种多边形填充算法，使用了多个基础算法，较复杂；

10. 《平面几何：求内接或外切于圆的正多边形》

11. 《平面几何：判断点是否在凸多边形内》，注意只能用于凸多边形；

12. 《平面几何：判断点是否在多边形内（射线法）》，基于射线法计算点是否在多边形，这里的多边形可以是任意非自交多变形。如果多边形的边自交，只能用于使用 “奇偶规则” 填充规则的多边形。

13. 《你知道吗？圆弧有3种表达方式》，圆弧的三种表达，分别对应 Canvas 2D、SVG 和 AutoCAD 的多段线。不同渲染器支持的表达可能不一致，一种可以考虑的兼容方式是转成它们都支持的三阶贝塞尔曲线。

14. 《在两条直线相交处添加圆角，算法该如何实现？》，可用于是实现各种图形的圆角效果，比如矩形、多边形。

15. 《平面几何：求直线线段的轮廓线》，有 Butt（平端）、Square（方形端）、Round（圆形端）三种类型。

16. 《LeetCode 几何算法题解：223-矩形面积》

贝塞尔曲线算法

1. 《贝塞尔曲线算法：求 t 在三阶贝塞尔曲线上的点、切向量、法向量》

2. 《贝塞尔曲线：求点到贝塞尔曲线的投影》

3. 《贝塞尔曲线算法：求贝塞尔曲线的包围盒》

4. 《求贝塞尔曲线和直线的交点》

文字渲染

1. 《常用的字体标准有哪些？》

2. 《opentype.js 使用与文字渲染》

开源图形编辑器架构

1. 《SVGEdit：老牌开源 SVG 编辑器是如何架构的？》，SVG 编辑器，很老的开源项目了，有不少小问题，但整体功能是比较完善的。

2. 《开源白板工具 Excalidraw 架构解读》，非常受欢迎的手绘风白板工具，但代码实现耦合严重，可读性差，不推荐细读源码，辣眼睛。

AutoCAD 2D 相关

1. 《AutoCAD 产品设计：图形单位》。不局限于 AutoCAD，讲解关于 UI 层和数据层格式的关系，分为线性单位和角度单位两种，推荐阅读。

2. 《AutoCAD 产品设计：文字样式的字高为 0 的逻辑》

3. 《AutoCAD 图形实体的属性（1）》

结尾

我是前端西瓜哥，欢迎关注我，学习更多图形编辑器知识。