摆正元素（带过渡动画）

本文简介

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

我不知道 straighten 使用 “摆正” 这个词来翻译正不正确，反正我就是要这么叫！

straighten：根据距离的远近，将元素从当前角度旋转至0、90、180、270等角度。

【百度百科的定义】

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

file

英语课代表的提醒~

效果如下图所示

file

版本说明

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

file

canvas.straightenObject 这个方法允许我们传入1个参数。这个参数是你需要摆正的元素对象(fabric.Object)。

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

摆正元素

方法2：object.straighten

使用 object.straighten 也能达到 canvas.straightenObject 的效果。

但 object.straighten 并不会自动刷新画布，需要使用 canvas.renderAll() 等方法配合。

方法3：canvas.fxStraightenObject

前面两个方法都是没过渡效果的。

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

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

file

摆正元素（过渡动画）

canvas.fxStraightenObject 不需要使用额外的方法刷新画布。

方法4：object.fxStraighten

使用 object.fxStraighten 也可以实现带过渡动画的摆正功能。

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

file

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

用法如下所示

我的想法

1. 如果要摆正的元素数量不多，可以使用 canvas.straightenObject 或 canvas.fxStraightenObject。
2. 如果元素数量比较多，使用 object.straighten 把元素都放好，然后再执行一次 canvas.renderAll() ，刷新一次即可。
3. 如果元素数量比较多，使用 object.fxStraighten 时，如果不需要在回调函数里执行什么操作，可以使用 requestAnimationFrame 的方法集体刷新。

上面第3点的代码

摆正元素（过渡动画）

  

这种写法只是想提供一种思路，真实开发需要根据你业务进行灵活调整。

代码仓库

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

推荐阅读

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

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