如何开发一款图形编辑器

大家好，我是前端西瓜哥。 今天我们来实现一个比较少用到的功能：对选中图形做水平翻转和垂直翻转。 翻转实现分成这么 3 步： 计算选中图形的中心位置，作为翻转的翻转中心； 得到翻转矩阵； 给所有的图形应

大家好，我是前端西瓜哥。 本文将介绍图形编辑器中吸附系统中，各种吸附类型的吸附逻辑和算法实现，让大家对吸附有一个概念。 吸附类型常见的有这么几种： 网格吸附； 极轴追踪； 参考线吸附； 正交； 对象吸

大家好，我是前端西瓜哥。 最近做个人的开源编辑器项目，实现了和 Figma 一样的编组功能，期间踩了不少坑，和大家分享一下。 阅读本文需要一些前置知识，所以你会看到很多文章引用。一时半会可能看不明白，

大家好，我是前端西瓜哥。 这篇文章是春节前的最后一篇文章，西瓜哥在这里提前祝大家新年快乐了。 在搭好图形编辑器的框架后，我们可能需要根据需求加入一些新的图形类型。 那么加入新的图形类型，需要做哪些工作

大家好，我是前端西瓜哥。 前段时间对自己的图形编辑器项目做了一次改造。 改用 transform 表达图形的变形，并废弃掉了原来的 rotation、x、y 属性。 然后再补上了图形的翻转的支持，以及

写了一堆图形编辑器开发的文章，汇总一下，方便读者朋友在遇到问题时，快速找到对应文章，建议收藏。 如果没找到，或者有什么感兴趣的主题，可以公众号后台给我留言，我看看能不能写篇文章出来。 图形编辑器 如果

大家好，我是前端西瓜哥。 本文将探究图形编辑器中钢笔工具的功能，算是一篇简单说明书。 只有理解了需求，尤其是复杂的需求，才能更好地进行功能开发，写出诗一样的高鲁棒性代码。 三阶贝塞尔曲线组成的路径 钢

大家好，我是前端西瓜哥。 今天我们来学习图形编辑器的网格模块要怎么设计和实现。 网格是什么？ 网格，指的是渲染在画布上的，按照特定间距绘制垂直和水平直线，所构成的网格。 作用是让用户可以较 直观 地观

大家好，我是前端西瓜哥。 这次讲解钢笔工具的实现思路。 先看一下整体效果： 钢笔工具的作用 钢笔工具的作用是：绘制一些复杂的图形。 这种图形叫做路径 Path，你也可以理解为多段线。 它将多条相对简单

大家好，我是前端西瓜哥。 上一篇文章我们讲了为什么以及如何用  transform、width 和 height 表达图形。 这篇文章我们来看看基于 transform 的这种表达形式，要如何实现图形

大家好，我是前端西瓜哥。 上篇文章我们讲解如何基于 transform 缩放但个矩形，实现了 resizeRect 方法。 今天我们再来看看如何对多个图形进行缩放。 我们要实现最终效果： 这里我默认你

大家好，我是前端西瓜哥。 挺久没写图形编辑器开发系列了，今天来讲讲控制点，它是图形编辑器的不可缺少的基础功能。 控制点是吸附在图形上的一些小矩形和圆形点击区域，在控制点上拖拽鼠标，能够实时对被选中进行

大家好，我是前端西瓜哥。 今天来讲讲如何在图形编辑器中使用自定义光标，并对光标其进行管理。 自定义光标的意义是什么？ 光标（游标）在图形界面交互中是非常基础的一环。 它是一个指针，悬浮在屏幕的最上层。

我写的一系列图形编辑器的文章，是基于我一个叫做 suika 的个人项目总结抽象而来的。 毕竟不落地，我写的文章就不真实。当然落地了你去看代码，有些细节大概也不太能看懂，文章为了方便理解，是做了简化的，

大家好，我是前端西瓜哥，今天我们来实现图形的缩放。 本文只讨论缩放单个图形的情况。 图形的属性 图形有几个重要的基础属性，会经常被用到，我们在实现缩放图形前需要理清一下它们。 x / y width

大家好，我是前端西瓜哥。 今天这篇文字来讲解一下图形编辑器如何实现图形的复制粘贴。 粘贴的范围 首先需要确认一下粘贴的范围。 如果只支持粘贴到当前编辑器下，方案很简单：只需要监听 Ctrl + C 键

大家好，我是前端西瓜哥。 快捷键操作在图形编辑器中是很高频的操作，能让用户快速高效地执行特定命令。 那么今天就来学习图形编辑器是如何做快捷键的管理的。 简单的快捷键绑定 我们先看看原生的键盘事件能否满

大家好，我是前端西瓜哥。 今天简单讲讲图形编辑器的显示属性值时，会遇到的格式转换问题。 单位转换 图形编辑器中的数据，通过 UI 层进行展示时，可能不会直接将数据源的原始值展示出来，而是会额外进行单位

大家好，我是前端西瓜哥。 图形编辑器，随着功能的增加，通常都会愈发复杂，良好的架构是保证图形编辑器持续开发高效的重要技术。 根据功能拆分成一个一个的小模块基本是家常便饭。那么模块之间是如何配合以及进行

大家好，我是前端西瓜哥。 今天来介绍如何实现图形绘制工具，实现绘制任意的图形。 我之前讲过如何实现工具类管理类的： 《图形编辑器：工具管理和切换》 对应的工具类的实现会围绕用户的 按下鼠标、拖拽、释放