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

想知道更多 Fabric.js 的玩法，关注我，第一时间获得最新推送

本文简介

在阅读本文前，你首先需要知道什么是 Fabric.js，还需要知道 Fabric.js 是如何创建矩形的。
如果你还没满足上面2个条件，推荐阅读《Fabric.js从入门到____》

我在 Fabric.js 使用框选操作创建矩形。
接下来的几篇文章我会写如何自由绘制圆形、椭圆形、三角形、线段、折线、多边形。

本文不做任何 CSS 相关的美化，只讲解实现原理。
下图是本文的要实现的效果。

文章图片

使用 Fabric.js 这类框架，是要注意版本的。

本文所用版本： Fabric.js 4.6.0

原理核心原理
用 “框选” 的方式生成矩形，其核心就2点：

鼠标点击和抬起时获取坐标点，也就是起始点和结束点。
鼠标抬起后，第1点 获取到的2个坐标计算出矩形的长、宽和位置。

鼠标点击：canvas.on('mouse:down', fn)
鼠标抬起: canvas.on('mouse:up', fn)

需要考虑的因素
理解了上面的核心点，接下来需要考虑的是鼠标框选的方向。

从左上往右下框选
从右下往左上框选
从左下往右上框选
从右上往左下框选

上面这4种情况会影响生成出来的矩形的长、宽和位置。

生成矩形的代码

new fabric.Rect({ top: 0, // 矩形左上角在y轴的位置 left: 0, // 矩形左上角在x轴的位置 width: 100, // 矩形的宽 height: 100, // 矩形的高 fill: 'transparent', // 填充色 stroke: '#000' // 边框颜色 })

接下来逐一说说这4种操作带来的影响。

从左上往右下框选

文章图片

这种情况是最好处理的。
此时起始点就是矩形的左上角，结束点就是矩形的右下角。
起始点的 x 和 y 坐标 都小于结束点，（起始点x < 结束点x；起始点y < 结束点y ）：

矩形的宽：结束点x坐标 - 起始点x坐标（也可以说是 (起始点x - 结束点x)的绝对值 ）。
矩形的高：结束点y坐标 - 起始点y坐标（也可以说是 (起始点y - 结束点y)的绝对值 ）。
左上角在x轴的位置：起始点的x轴坐标 。
左上角在y轴的位置：起始点的y轴坐标 。

从右下往左上框选

文章图片

起始点x > 结束点x；起始点y > 结束点y

宽：起始点x - 结束点x 。
高：起始点y - 结束点y 。
左上角在x轴的坐标：结束点x
左上角在y轴的坐标：结束点y

从左下往右上框选

文章图片

起始点x < 结束点x；起始点y > 结束点y

宽：(起始点x - 结束点y)的绝对值
高：起始点y - 结束点y
左上角在x轴的坐标：起始点x (比较x坐标，取小的那个，可以用 Math.min 方法)。
左上角在y轴的坐标：结束点y (比较y坐标，取小的那个)。

从右上往左下框选

文章图片

起始点x > 结束点x；起始点y < 结束点y

宽：起始点x - 结束点x 。
高：(起始点y - 结束点y)的绝对值 。
左上角在x轴的坐标：结束点x (比较x坐标，取小的那个，可以用 Math.min 方法)。
左上角在y轴的坐标：起始点y (比较y坐标，取小的那个)。

总结公式
分析完上面4种情况，最后总结出来这几个参数的公式。
我将起始点命名为 downPoint，结束点命名为 upPoint 。
矩形的几个参数计算公式如下：

new fabric.Rect({ top: Math.min(downPoint.y, upPoint.y), left: Math.min(downPoint.x, upPoint.x), width: Math.abs(downPoint.x - upPoint.x), height: Math.abs(downPoint.y - upPoint.y), fill: 'transparent', stroke: '#000' })