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 的画布缩放功能说明

CRDT 协同编辑算法

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

  2. CRDT 协同编辑:如何确定操作时序?

  3. Figma 是如何做协同编辑的?》Figma 早期(2019)使用的类 CRDT 协同编辑方案,后面不知道有没做更改。

  4. Figma 在协同编辑中使用的顺序一致性算法:Fractional indexing》同层级图形在协同后,如何保证最终顺序一致。

  5. CRDT 协同编辑:另一种顺序一致性算法 Tree-Based 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种表达方式

开源图形编辑器架构

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

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

AutoCAD 2D 相关

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

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

结尾

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