Skip to content

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

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

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

线上体验:

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

图形编辑器

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

工具模块

图形缩放(resize)

钢笔和画笔工具

更新图形属性

画布缩放

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

吸附

UI 层相关

性能优化

编辑器与协同

其他

Figma 技术调研

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

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

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

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

  1. 剖析 Figma 图形对象的基本属性

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

  3. 剖析 Figma 数据结构:不同图形的特有属性

  4. Figma 数据结构:容器类图形的属性

  5. Figma 的画布缩放功能说明

  6. 浏览器没有鼠标连击事件,那我们自己造

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

  8. 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)

结尾

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