想晓得更多 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'})Math.min：两者之中取小值
Math.abs：返回绝对值
这两个都是 JS 提供的办法，如果不了解的倡议去百度一下。
入手实现
我在这里贴出用 原生形式 实现的代码和正文。
如果你想晓得在 Vue3 环境下如何实现 Fabric.js 自在绘制矩形，能够在 代码仓库 里查找。
<!-- 工具栏 --><div class="toolbar"> <select onchange="typeChange(this.options[this.options.selectedIndex].value)"> <option value="default">默认（框选）</option> <option value="rect">矩形</option> </select></div><!-- 画布 --><canvas id="canvas" width="800" height="800"></canvas><!-- 引入fabric.js --><script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.js"></script><script>let canvas = null // 画布对象let currentType = 'default' // 以后操作模式（默认 || 创立矩形）let downPoint = null // 按下鼠标时的坐标let upPoint = null // 松开鼠标时的坐标// 初始化画板function initCanvas() { canvas = new fabric.Canvas('canvas') canvas.on('mouse:down', canvasMouseDown) // 鼠标在画布上按下 canvas.on('mouse:up', canvasMouseUp) // 鼠标在画布上松开}// 画布操作类型切换function typeChange(opt) { currentType = opt switch(opt) { case 'default': // 默认框选模式 canvas.selection = true // 容许框选 canvas.selectionColor = 'rgba(100, 100, 255, 0.3)' // 选框填充色：半透明的蓝色 canvas.selectionBorderColor = 'rgba(255, 255, 255, 0.3)' // 选框边框色彩：半透明灰色 canvas.skipTargetFind = false // 容许选中 break case 'rect': // 创立矩形模式 canvas.selectionColor = 'transparent' // 选框填充色：通明 canvas.selectionBorderColor = 'rgba(0, 0, 0, 0.2)' // 选框边框色彩：透明度很低的彩色（看上去是灰色） canvas.skipTargetFind = true // 禁止选中 break }}// 鼠标在画布上按下function canvasMouseDown(e) { // 鼠标左键按下时，将以后坐标 赋值给 downPoint。{x: xxx, y: xxx} 的格局 downPoint = e.absolutePointer}// 鼠标在画布上松开function canvasMouseUp(e) { // 绘制矩形的模式下，才执行上面的代码 if (currentType === 'rect') { // 松开鼠标左键时，将以后坐标 赋值给 upPoint upPoint = e.absolutePointer // 调用 创立矩形 的办法 createRect() }}// 创立矩形function createRect() { // 如果点击和松开鼠标，都是在同一个坐标点，不会生成矩形 if (JSON.stringify(downPoint) === JSON.stringify(upPoint)) { return } // 创立矩形 // 矩形参数计算（后面总结的4条公式） let top = Math.min(downPoint.y, upPoint.y) let left = Math.min(downPoint.x, upPoint.x) let width = Math.abs(downPoint.x - upPoint.x) let height = Math.abs(downPoint.y - upPoint.y) // 矩形对象 const rect = new fabric.Rect({ top, left, width, height, fill: 'transparent', // 填充色：通明 stroke: '#000' // 边框色彩：彩色 }) // 将矩形增加到画布上 canvas.add(rect) // 创立完矩形，清空 downPoint 和 upPoint。当然，你也能够不做这步。 downPoint = null upPoint = null}// 页面加载的生命周期，在此执行 初始化画布 的操作window.onload = function() { initCanvas()}</script>代码仓库
- ⭐原生版本的代码 **
- ⭐Vue3版本的代码
举荐浏览
- 《Fabric.js 自定义右键菜单》
- 《Fabric.js 从入门到收缩》
- 《Fabric.js 摆正元素的4种办法（带过渡动画）》
- 《Fabric.js 删除元素（带过渡动画）》
点赞 + 关注 + 珍藏 = 学会了