Fabric.js 自由绘制圆形

发布时间:2023-02-22 08:30

本文简介

这次要讲的是 自由绘制圆形

在 《Fabric.js 自由绘制矩形》 里讲到的思路,放在圆形里不太适用。

这次要做到的效果如下图所示。

Fabric.js 自由绘制圆形_第1张图片



思路

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

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

交互操作方面,我按照 PhotoShop 椭圆工具的操作逻辑。

圆形的直径是矩形的短边。

Fabric.js 自由绘制圆形_第2张图片


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



动手实现

我在这里贴出用 原生方式 实现的代码和注释。

如果你想知道在 Vue3 环境下如何实现 Fabric.js 自由绘制矩形,可以在 代码仓库 里查找。




代码仓库

  • ⭐原生版本的代码
  • ⭐Vue3版本的代码


推荐阅读

  • 《Fabric.js 自由绘制矩形》
  • 《Fabric.js 自定义右键菜单》
  • 《Fabric.js 从入门到膨胀》

点赞 + 关注 + 收藏 = 学会了

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号