
在本教程中,我们将学习如何使用动画来拉直图像 FabricJS。我们可以通过创建fabric.Image的实例来创建一个Image对象。自从 它是FabricJS的基本元素之一,我们也可以通过应用轻松定制它 角度、不透明度等属性。为了用动画拉直图像,我们使用 fxStraighten 方法。
语法
fxStraighten(callbacks: Object): fabric.Object
参数
callbacks - 该参数是一个带有回调函数的对象,可以使用 更改与动画相关的某些属性。
使用拉直方法
示例
让我们看一个代码示例,了解使用 straighten 方法时 Image 对象如何显示 用于代替fxstraighten。这将帮助我们认识到它们之间的区别。 straighten 方法只是straighten将对象从当前角度旋转到 0、90,180、270 等,具体取决于哪一个更接近。然而,fxstraighten适用于 同样的方式,但有动画。
Using the Straighten method
You can see that there is no animation but the image has been straightened
![]()
使用fxstraighten方法
示例
在此示例中,我们使用了fxstraighten方法来拉直图像对象 并显示一个简单的动画。图像对象具有 45 度角, 通过旋转回 0 度来拉直。除此之外,onChange 函数是 在动画的每一步都会调用,而 onComplete 函数仅在 动画完成,这就是为什么我们的图像对象最终被缩放 水平移动 1.5 倍并向左移动 130 的值。
Using the fxStraighten method
You can see that the image gets straightened while also displaying an animation
![]()










