图形编辑器文章汇总

前端西瓜哥
763 阅读6分钟

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

如果没找到，或者有什么感兴趣的主题，可以公众号后台给我留言，我看看能不能写篇文章出来。

图形编辑器

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

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

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

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

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

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

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

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

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

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

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

工具模块

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

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

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

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

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

  6. 《图形编辑器开发：缩放和旋转控制点》，在选中图形上显示控制点，通过拖拽控制点进行缩放以及选择图形操作。

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

更新图形属性

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

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

画布缩放

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

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

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

UI 层相关

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

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

其他

  1. 《如何在 Canvas 上实现图形拾取？》

  2. 《图形编辑器开发：参考线吸附效功能，让图形自动对齐》

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

  4. 《图形遍历效率低？试试 R 树》，使用 R 树进行图形的快速索引，减少遍历次数，空间换时间。

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

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

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

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

  9. 《Canvas 性能优化：脏矩形渲染》

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

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

Figma 技术调研

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

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

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

madebyevan.com/figma/fig-f…

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

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

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

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

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

CRDT 协同编辑算法

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

  2. 《Figma 是如何做协同编辑的？》Figma 早期（2019）使用的类 CRDT 协同编辑方案，后面不知道有没做更改。

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

  4. 《CRDT 协同编辑：另一种顺序一致性算法 Tree-Based Indexing》，基于树的顺序一致性算法

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

平面几何算法

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

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

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

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

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

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

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

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

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

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

开源图形编辑器架构

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

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

结尾

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

avatar
文章
阅读
粉丝