如何开发一款图形编辑器

大家好，我是前端西瓜哥。 开发图形编辑器，你会经常要解决一些算法问题。本文盘点一些我开发图形编辑器时常用到的简单几何算法。 矩形碰撞检测 判断两个矩形是否发生碰撞（或者说相交），即两个矩形有重合的区域

大家好，我是前端西瓜哥。 wasm 拿来做 Web 端的图形编辑器貌似是不错的选择。 因为图形处理会有相当多无法利用到 WebGL GPU 加速的 CPU 密集的计算。比如对一条复杂贝塞尔曲线进行三角

大家好，我是前端西瓜哥。 我开发的图形编辑器，原本选中图形是基于选区是否完全包含对应图形来判断其是否被选中，使用的是矩形包含判断。 但用着用着，我发现包含可能并不是一个好策略。 我想要选中一个大矩形，

大家好，我是前端西瓜哥。 最近做图形编辑器，有这么一个需求，在输入框输入颜色十六进制值（hex），自动转为对应 6 位长度的 hex。 如果值不合法，回退为上次合法输入。 颜色 hex 规则 颜色 h

最近我给图形编辑器增加了参照线吸附功能，讲讲我的实现思路。 效果是被移动的图形会参考周围图形，自动与它们进行吸附对齐。 不得不说，很酷炫。 感觉这个图形编辑器突然变得灵动起来，有了灵魂一般。 为什么需

大家好，我是前端西瓜哥。 之前我们实现了画布缩放的功能，本文来讲讲如何让内容缩放至适应画布大小（Zoom to fit）。 我们看看效果。 缩放至适应画布 总体思路： 计算包裹住所有图形的大包围盒 b

大家好，我是前端西瓜哥。 最近有读者咨询我一个缩放问题。 应该是他要给项目做缩放功能，然后看到了 我图形编辑器缩放的文章，想要跟着我文章的思路移植到他的项目上。 但他搞不定，来找我。我给他搞定了，然后

大家好，我是前端西瓜哥。 画布缩放是图形设计工具中很重要的基础能力。 通过它，我们可以像举着一台摄影机，在图形所在的世界到处游逛，透过镜头，可以只看自己想看的图形；可以拉近摄影机，看到图形的细节；也可

大家好，我是前端西瓜哥。 对于一个图形设计软件，它最基础的工具是什么？选择工具。 但这个选择工具，却是相当的复杂。这次我来和各位，细说细说选择工具的一些弯弯道道。 单选 最基本的，要做到单个图形的选中

大家好，我是前端西瓜哥，今天随便聊点。 一个图形编辑器分三层，自底向上为： 渲染引擎 编辑器内核 UI 层 渲染引擎 渲染引擎可以用开源的，比如： Pixijs Fabric Konva（从 Fabr

大家好，我是前端西瓜哥。今天讲一下图形编辑器如何实现历史记录，做到撤销重做。 其实就是版本号的更替。每个版本保存一个状态。 数据结构 要记录图形编辑器的历史记录，支持撤销重做功能，需要两个栈：撤销（u

大家好，我是前端西瓜哥。今天来讲讲几何算法中，比较经典的算法：矩形碰撞和包含检测算法。 矩形碰撞检测是被广泛使用的算法。 比如在游戏中，为了优化图形碰撞判断效率（复杂不规则图形之间的碰撞算法很复杂），

大家好，我是前端西瓜哥。这次来简单说说实现图形编辑器对齐功能的思路。 对齐功能 实现图形编辑器的对齐功能。 原理不复杂。 首先要指定多个图形，不能只有一个。因为一个的话是没有参照物的，只能自己参照自己

大家好，我是前端西瓜哥。 在图形编辑器中，想象这么一个场景，我们撤销了一些重要的操作，然后想选中一个图形，看看它的属性。你点了上去，然后你发现你再也无法重做了。 你以为你点了一下，但其实你点击的时候，

大家好，我是前端西瓜哥。今天我们看看对于一款图形编辑器，应该怎么去实现工具，比如绘制矩形、选中工具，以及如何去管理它们的。 一款编辑器，有两个很重要的方面，一个是性能，另一个是架构。 因为不知道用户会

大家好，我是前端西瓜哥。图形编辑器的一个需求，就是可以通过属性面板的输入框设置选中元素的属性值。 最终效果如下： 元素对象的结构： 设置 x / y UI 界面显示上说的 x / y，指的是旋转后的

大家好，我是前端西瓜哥。这次来讲解图形编辑器排列（arrange）功能的实现。 先看效果。 有四种移动方式： 置顶（Front）：将指定的图形移动到顶部； 置底（Back）：将制定图形移动到底部； 上

大家好，我是前端西瓜哥。我的图形编辑器项目一直都是用一个 1080P 的老显示器开发的。 但最近我改用 Macbook Pro 的视网膜 （Retina） 屏幕开发时，发现高分屏（高分辨率屏幕）反而让

大家好，我是前端西瓜哥。今天我们来谈谈图形编辑器中，简单说说图形编辑实现图形工具，需要用到的填充算法。 图形的特点是宽高是固定的，在图形编辑器绘制图片有两种方案。 一种是将 宽高比锁死，不允许改变，这

大家好，我是前端西瓜哥。今天我们来学变换矩阵。 线性变换 矩阵乘法是来自线性代数的内容。 首先我们有一个二维的向量 (x, y)，它在线性代数中，我们会这么表示： 向量在几何中会用一条起始于原点的箭头