本文简介

这次要讲的是 4个 “摆正” 元素的办法，这是我工作中遇到的场景。

我不晓得 straighten 应用 “摆正” 这个词来翻译正不正确，反正我就是要这么叫！

straighten：依据间隔的远近，将元素从以后角度旋转至0、90、180、270等角度。


【百度百科的定义】

straighten，英文单词，及物动词、不及物动词，作及物动词时意为“整顿；使…改过；使…挺直；使…恶化”，作不及物动词时意为“变直；恶化”。


英语课代表的揭示~


成果如下图所示



版本阐明

Fabric.js版本：4.6.0



相干API

Fabric.js 提供了几个 API 实现 摆正操作：

  • canvas.straightenObject(object)
  • object.straighten()
  • canvas.fxStraightenObject(object)
  • object.fxStraighten()


须要留神的是，应用 object.straighten 和 object.fxStraighten 摆正元素后，画面是不会自动更新的（但理论是曾经摆正了），须要配合 canvas.renderAll() 等刷新画布的 API 一起应用。

这点官网文档上如同没有特地阐明。


下面4个 API 中，带 fx 的是有过渡动画成果的。



示例代码

接下来的代码里，应用到的 元素对象 我都在公共变量里定义好的。

如果须要动静获取指定元素，你能够应用 canvas.getObjects() 、getActiveObject() 等办法，这依据你业务场景来定。

这些办法都不是本文想解说的重点，所以当初先回归到原来的目标吧。


办法1：canvas.straightenObject

canvas.straightenObject 这个办法容许咱们传入1个参数。这个参数是你须要摆正的元素对象(fabric.Object)。


我用一个 三角形 来举例。逻辑都写在代码正文里。

<button onclick="straightenObject()">摆正元素</button><canvas id="canvasBox" width="600" height="600"></canvas><!-- 引入fabric.js --><script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.min.js"></script><script>let canvas = null // 画布对象let triangle = null // 三角形对象window.onload = function() {  // 初始化画布  canvas = new fabric.Canvas('canvasBox', {    width: 400,    height: 400  })  // 三角形  triangle = new fabric.Triangle({    top: 100,    left: 100,    width: 80, // 底边长度    height: 100, // 底边到对角的间隔    fill: 'blue',    angle: 30 // 旋转了30度  })    // 将矩形增加到画布中  canvas.add(triangle)}// 摆正function straightenObject() {  // 传入三角形对象  canvas.straightenObject(triangle)}</script>


办法2：object.straighten

应用 object.straighten 也能达到 canvas.straightenObject 的成果。

但 object.straighten 并不会主动刷新画布，须要应用 canvas.renderAll() 等办法配合。

<!-- 省略局部代码 --><script>// 摆正function straightenObject() {  // 三角形对象调用 straighten 办法，从而摆正本身  triangle.straighten()  // 摆正完，须要刷新画布  canvas.renderAll()}</script>


办法3：canvas.fxStraightenObject

后面两个办法都是没过渡成果的。

接下来就试试有过渡成果的 API：canvas.fxStraightenObject 。

和 canvas.straightenObject 一样，canvas.fxStraightenObject 也须要传入一个 对象参数(fabric.Object) 。

<button onclick="fxStraightenObject()">摆正元素（过渡动画）</button><canvas id="canvasBox" width="600" height="600"></canvas><!-- 引入fabric.js --><script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.min.js"></script><script>let canvas = null // 画布对象let triangle = null // 三角形对象window.onload = function() {  // 初始化画布  canvas = new fabric.Canvas('canvasBox', {    width: 400,    height: 400  })  // 三角形  triangle = new fabric.Triangle({    top: 100,    left: 100,    width: 80, // 底边长度    height: 100, // 底边到对角的间隔    fill: 'blue',    angle: 30 // 旋转了30度  })    // 将矩形增加到画布中  canvas.add(triangle)}// 摆正function fxStraightenObject() {  // 传入三角形对象  canvas.fxStraightenObject(triangle)}</script>

canvas.fxStraightenObject 不须要应用额定的办法刷新画布。


办法4：object.fxStraighten

应用 object.fxStraighten 也能够实现带过渡动画的摆正性能。

但 object.fxStraighten 有点特地，它也能传入1个参数，该参数是个对象，对象外面有2个函数字段。

  • onComplete ：动画实现后的回调函数
  • onChange ：动画执行过程中的回调函数

用法如下所示

<!-- 省略局部代码 --><script>// 摆正function fxStraightenObject() {  // 传入三角形对象    triangle.fxStraighten({    onChange() {      canvas.renderAll()    },    onComplete() {      canvas.renderAll()    }  })}</script>


我的想法

  1. 如果要摆正的元素数量不多，能够应用 canvas.straightenObject 或 canvas.fxStraightenObject。
  2. 如果元素数量比拟多，应用 object.straighten 把元素都放好，而后再执行一次 canvas.renderAll() ，刷新一次即可。
  3. 如果元素数量比拟多，应用 object.fxStraighten 时，如果不须要在回调函数里执行什么操作，能够应用 requestAnimationFrame 的办法个体刷新。


下面第3点的代码

<button onclick="fxStraightenObject()">摆正元素（过渡动画）</button><canvas id="canvasBox" width="600" height="600"></canvas>  <script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.js"></script><script>let canvas = null // 画布对象let triangle = null // 三角形对象let rect = null // 矩形对象window.onload = function() {  // 应用 元素id 创立画布，此时能够在画布上框选  canvas = new fabric.Canvas('canvasBox', {    width: 400,    height: 400  })  // 三角形  triangle = new fabric.Triangle({    top: 100,    left: 100,    width: 80, // 底边长度    height: 100, // 底边到对角的间隔    fill: 'blue',    angle: 30  })  // 矩形  rect = new fabric.Rect({    top: 70,    left: 200,    width: 100, // 宽    height: 30, // 高    fill: 'orange',    angle: -40  })    // 将矩形增加到画布中  canvas.add(triangle, rect)  renderAll()}// 一直刷新画布function renderAll() {  canvas.renderAll()  requestAnimationFrame(renderAll)}// 摆正（带过渡动画）function fxStraightenObject() {  triangle.fxStraighten() // 摆正三角形  rect.fxStraighten() // 摆正矩形}</script>

这种写法只是想提供一种思路，实在开发须要依据你业务进行灵便调整。



代码仓库

  • 原生形式实现 摆正元素（带过渡动画）
  • 在Vue3中应用Fabric实现 摆正元素（带过渡动画）



举荐浏览

  • ⭐《Fabric.js 从入门到收缩》
  • ⭐《Fabric.js 3个api设置画布宽高》
  • ⭐《Fabric.js 自定义右键菜单》

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