关于前端:Fabricjs-自由绘制矩形

想晓得更多 Fabric.js 的玩法，关注我，第一工夫取得最新推送

本文简介

在浏览本文前，你首先须要晓得什么是 Fabric.js，还须要晓得 Fabric.js 是如何创立矩形的。

如果你还没满足下面 2 个条件，举荐浏览《Fabric.js 从入门到____》

我在 Fabric.js 应用 框选操作 创立矩形。

接下来的几篇文章我会写如何自在绘制 圆形、椭圆形、三角形、线段、折线、多边形。

本文不做任何 CSS 相干的丑化，只解说实现原理。

下图是本文的要实现的成果。

应用 Fabric.js 这类框架，是要留神版本的。

本文所用版本：Fabric.js 4.6.0

原理

外围原理

用“框选”的形式生成矩形，其外围就 2 点：

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

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

鼠标抬起: canvas.on('mouse:up', fn)

须要思考的因素

了解了下面的外围点，接下来须要思考的是鼠标框选的 方向。

1. 从 左上 往 右下 框选
2. 从 右下 往 左上 框选
3. 从 左下 往 右上 框选
4. 从 右上 往 左下 框选

下面这 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 删除元素（带过渡动画）》

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