锐客网

  1. 首页 > 睿知 > it技术 > >

Fabric.js|Fabric.js 自由绘制椭圆

本文简介 点赞 + 关注 + 收藏 = 学会了


本文讲解在 Fabric.js 中如何自由绘制椭圆形，如果你还不了解 Fabric.js，可以查阅 《Fabric.js从入门到精通》。
效果如下图所示
Fabric.js|Fabric.js 自由绘制椭圆
文章图片





思路 Fabric.js 在初始化画布之后，可以执行框选操作，但默认是使用矩形的方式来框选，如下图所示：
Fabric.js|Fabric.js 自由绘制椭圆
文章图片

我希望使用鼠标创建椭圆的时候可以又一个椭圆的影子出来，这能让我更方便去观察当前要画的椭圆大概是什么样子。
所以我们可以先把框选时的边框和背景色设置成透明，然后再框选时监听鼠标点击、移动、松开的事件，从而绘制出一个椭圆。


详细思路步骤如下：

  1. 将框选时边框和背景设为透明
  2. 鼠标点击时创建椭圆
  3. 鼠标移动时修改椭圆尺寸
  4. 鼠标松开时生成正式的椭圆


我将整个绘制事件拆分成上面4步，但其实第3步还是有点难度的，我们要考虑几种情况：
  1. 点击时的坐标在移动时的左下方
  2. 点击时的坐标在移动时的左上方
  3. 点击时的坐标在移动时的右上方
  4. 点击时的坐标在移动时的右下方


这4种情况我在 《Fabric.js 自由绘制矩形》 里逐一分析过，可以去看看（记得点个赞哦~）




编码 在理清思路后，我们可以正式编码阶段。
我还是会按照1、2、3、4的步骤去编码，你在两个浏览器窗口中打开本文，一边是编码，一边是思路，对照着看可能会清晰点。

从上面的代码可以看出，主要核心部分就是 “鼠标点击时，鼠标移动时，松开鼠标后” 这几个环节。鼠标移动时，要实时监听鼠标当前的坐标，松开鼠标后就不再监听。


Fabric.js|Fabric.js 自由绘制椭圆
文章图片





代码仓库 【Fabric.js|Fabric.js 自由绘制椭圆】?Fabric.js 自由绘制椭圆




推荐阅读
  • 《Fabric.js 自由绘制矩形》
  • 《Fabric.js 自由绘制矩形》
  • 《Fabric.js 自定义右键菜单》
  • 《Fabric.js 从入门到膨胀》
  • 《Fabric.js 3个api设置画布宽高》
点赞 + 关注 + 收藏 = 学会了

    推荐阅读


    上一篇：Fabric.js|Fabric.js 缩放画布

    下一篇：Fabric.js|Fabric.js 自由绘制圆形