theme: smartblue
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情
本文简介
点赞 + 关注 + 收藏 = 学会了
本文讲解在 Fabric.js 中如何自由绘制椭圆形，如果你还不了解 Fabric.js，可以查阅 《Fabric.js从入门到精通》。
效果如下图所示
思路
Fabric.js 在初始化画布之后，可以执行框选操作，但默认是使用矩形的方式来框选，如下图所示：
我希望使用鼠标创建椭圆的时候可以又一个椭圆的影子出来，这能让我更方便去观察当前要画的椭圆大概是什么样子。
所以我们可以先把框选时的边框和背景色设置成透明，然后再框选时监听鼠标点击、移动、松开的事件，从而绘制出一个椭圆。
详细思路步骤如下：
- 将框选时边框和背景设为透明
- 鼠标点击时创建椭圆
- 鼠标移动时修改椭圆尺寸
- 鼠标松开时生成正式的椭圆
我将整个绘制事件拆分成上面4步，但其实第3步还是有点难度的，我们要考虑几种情况：
- 点击时的坐标在移动时的左下方
- 点击时的坐标在移动时的左上方
- 点击时的坐标在移动时的右上方
- 点击时的坐标在移动时的右下方
这4种情况我在 《Fabric.js 自由绘制矩形》 里逐一分析过，可以去看看(记得点个赞哦~)
编码
在理清思路后，我们可以正式编码阶段。
我还是会按照1、2、3、4的步骤去编码，你在两个浏览器窗口中打开本文，一边是编码，一边是思路，对照着看可能会清晰点。
```html
```
从上面的代码可以看出，主要核心部分就是 “鼠标点击时，鼠标移动时，松开鼠标后” 这几个环节。鼠标移动时，要实时监听鼠标当前的坐标，松开鼠标后就不再监听。
656
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
