如何开发一款图形编辑器

本文首发于我的公众号：前端西瓜哥 大家好，我是前端西瓜哥。 最近更文比较少，是因为本人在做个人开源项目，用 Canvas 做一个设计工具，做个乞丐版 figma。期间遇到了不少问题，在这里记录一下

大家好，我是前端西瓜哥。今天我们来实现图形编辑器的标尺功能。 标尺指的是画布上边和左边的两个有刻度的尺子，作用让用户知道他正在编辑的视口所在位置范围。 我们的需求是：间隔特定的长度，绘制一个刻度，并显

大家好，我是前端西瓜哥。今天看看绘制图形和辅助线时，坐标转换的一些注意点。 先回顾一下之前讲的视口坐标和场景坐标的转换关系。 视口转场景： 场景转视口： 图形的绘制 场景很大，但能画的范围其实就视口大

大家好，我是前端西瓜哥，今天来和大家说说 canvas 怎么做图形拾取。 图形拾取，指的是用户通过鼠标或手指在图形界面上能选中图形的能力。图形拾取技术是之后的高亮图形、拖拽图形、点击触发事件的基础。

大家好，我是前端西瓜哥。 使用 Canvas 做图形编辑器时，我们需要自己维护自己的图形树，来保存图形的信息，并定义元素之间的关系。 我们改变画布中的某个图形，去更新画布，最简单的是清空画布，然后根据

大家好，我是前端西瓜哥。 在上篇文章我们讨论了使用 脏矩形渲染，通过重渲染局部的图形来提优化 Canvas 的性能，将 GPU 密集转换为 CPU  密集。 CPU 密集在哪？ 在需要遍历 所有的图形

大家好，我是前端西瓜哥。 图形编辑器的坐标系有两种。 一个是场景（scene）坐标系，一个是 视口（viewport）坐标系。视口就是场景的一个子区域。 假设我们的视口的原点，离场景原点的坐标水平和垂

大家好，我是前端西瓜哥。今天谈谈贝塞尔曲线是什么以及它的原理，并说说如何用 Canvas 技术绘制一条三阶贝塞尔曲线。

图形编辑器的一个非常基础需求是：可以通过选择工具勾画出一个矩形选区，来选中该区域内的所有图形，以方便之后的批量移动、变形、删除等操作。那么如何判断这些元素是否在矩形选区，该选择哪种算法，就需要我们考虑

今天我们来学习使用 canvas 技术实现图片查看器需要掌握的一个知识点：需要在一个特定大小的容器内加载并展示一张照片，我们可以怎样进行图片的默认展示？

我是前端西瓜哥，今天教你怎么开发一款图形编辑器。编辑器是比较复杂的项目，由多个功能模块组合而成。要想编辑器的代码有优秀拓展性、可维护性，分模块解耦是非常重要的事情。