本文介绍这次我要说的是“拉直”元素的4种方法，都是我在工作中遇到的场景。我不知道straighten使用“tostraighten”这个词是否翻译正确，但无论如何我都会这样称呼它！straighten：根据距离，将元素从当前角度旋转到0、90、180、270等角度。【百度百科的定义】straighten，英文单词，及物动词，不及物动词，用作及物动词时，意思是“整顿；使……纠正；使……直；使……更好”，当用作不及物动词意思是“拉直；变得更好”。英语课代表提醒~效果如下图版本说明Fabric.js版本：4.6.0相关APIFabric.js提供了几个API来完成拉直操作：canvas.straightenObject(object)object.straighten()canvas.fxStraightenObject(object)object.fxStraighten()需要注意的是，使用object.straighten和object.fxStraighten对元素进行拉直后，画面不会自动更新（但实际上已经拉直），并且它需要配合canvas.renderAll()等。配合API一起使用，刷新画布。这一点在官方文档中似乎并没有具体说明。以上四个API中，带fx的都有过渡动画效果。在示例代码的以下代码中，使用的元素对象均定义在公共变量中。如果需要动态获取指定元素，可以根据业务场景使用canvas.getObjects()、getActiveObject()等方法。这些方法不是本文的重点，现在言归正传。方法一：canvas.straightenObjectcanvas.straightenObject这个方法允许我们传入1个参数。这个参数就是你需要拉直的元素对象（fabric.Object）。我以三角形为例。逻辑写在代码注释中。拉直元素方法二：object.straighten也可以实现通过使用object.straightencanvas.straightenObject的效果。但是object.straighten不会自动刷新画布，需要使用canvas.renderAll()等方法配合。方法三：canvas.fxStraightenObject前两个方法没有过渡效果。接下来，尝试具有过渡效果的API：canvas.fxStraightenObject。和canvas.straightenObject一样，canvas.fxStraightenObject也需要传入一个对象参数（fabric.Object）。拉直元素（过渡动画）canvas.fxStraightenObject不需要使用额外的方法刷新画布。方法四：object.fxStraighten使用object.fxStraighten也可以实现带有过渡动画的拉直功能。但是object.fxStraighten有点特殊，它也可以传入1个参数，是一个对象，对象中有2个函数字段。onComplete:动画完成后的回调函数onChange:动画执行过程中回调函数的用法如下我的想法如果要拉直的元素不多，你可以使用canvas.straightenObject或canvas.fxStraightenObject。如果元素很多，用object.straighten把所有的元素都放好，然后再执行canvas.renderAll()刷新一次。如果元素比较多，在使用object.fxStraighten时，如果不需要在回调函数中进行任何操作，可以使用requestAnimationFrame的方法统一刷新。上面第3点的代码Straightenelements(transitionanimation)这种写法只是提供一种思路，实际开发需要灵活调整根据自己的业务代码仓库原生实现拉直元素的方式（带转场动画）在Vue3中使用Fabric实现拉直元素（带转场动画）推荐阅读?《Fabric.js 从入门到膨胀》?《Fabric.js 3个api设置画布宽高》?《Fabric.js 自定义右键菜单》点赞+关注+收藏=学到了
