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

本文简介这次要讲的是自由绘制圆形。
在《Fabric.js 自由绘制矩形》里讲到的思路，放在圆形里不太适用。
这次要做到的效果如下图所示。

文章图片

思路 Fabric.js 默认的框选操作是矩形，如果需要做到上图的效果，需要做以下3步：

点击画布时 canvas.on('mouse:down', fn)，创建一个圆形。
鼠标移动时 canvas.on('mouse:move', fn)，圆形的大小跟随鼠标所在的位置进行缩放。
松开鼠标时 canvas.on('mouse:up', fn)，确定圆形大小。

交互操作方面，我按照 PhotoShop 椭圆工具的操作逻辑。
圆形的直径是矩形的短边。

文章图片

【Fabric.js|Fabric.js 自由绘制圆形】

如果 “移动鼠标的坐标点” 在点击时的坐标点左侧或者上方，需要将圆形的左上角移到 “移动鼠标的坐标点” 。

动手实现我在这里贴出用原生方式实现的代码和注释。
如果你想知道在 Vue3 环境下如何实现 Fabric.js 自由绘制矩形，可以在代码仓库里查找。

代码仓库