Fabric.js 自由绘制矩形（逐一分析4种操作方向带来的影响）
Fabric.js 自由绘制矩形（逐一分析4种操作方向带来的影响）
本文简介
在阅读本文前，你首先需要知道什么是
Fabric.js，还需要知道Fabric.js是如何创建矩形的。 如果你还没满足上面2个条件，推荐阅读 《Fabric.js从入门到____》
我在 Fabric.js 使用 框选操作 创建矩形。
接下来的几篇文章我会写如何自由绘制 圆形、椭圆形、三角形、线段、折线、多边形。
本文不做任何 CSS 相关的美化，只讲解实现原理。
下图是本文的要实现的效果。
使用 Fabric.js 这类框架，是要注意版本的。
本文所用版本：
Fabric.js4.6.0
原理
核心原理
用 “框选” 的方式生成矩形，其核心就2点：
- 鼠标 点击 和 抬起 时获取坐标点，也就是 起始点 和 结束点 。
- 鼠标抬起后，第1点 获取到的2个坐标计算出矩形的长、宽和位置。
鼠标点击：canvas.on('mouse:down', fn)
鼠标抬起: canvas.on('mouse:up', fn)
需要考虑的因素
理解了上面的核心点，接下来需要考虑的是鼠标框选的 方向 。
- 从 左上 往 右下 框选
- 从 右下 往 左上 框选
- 从 左下 往 右上 框选
- 从 右上 往 左下 框选
上面这4种情况会影响生成出来的矩形的 长、宽 和 位置。
生成矩形的代码
接下来逐一说说这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 。
矩形的几个参数计算公式如下：
Math.min：两者之中取小值
Math.abs：返回绝对值
这两个都是 JS 提供的方法，如果不理解的建议去百度一下。
动手实现
我在这里贴出用 原生方式 实现的代码和注释。
如果你想知道在 Vue3 环境下如何实现 Fabric.js 自由绘制矩形，可以在 代码仓库 里查找。
代码仓库
腾讯云开发者
