在本教程中,我们将学习如何使用动画来拉直图像
FabricJS。我们可以通过创建fabric.Image的实例来创建一个Image对象。自从
它是FabricJS的基本元素之一,我们也可以通过应用轻松定制它
角度、不透明度等属性。为了用动画拉直图像,我们使用
fxStraighten 方法。
语法
fxStraighten(callbacks: Object): fabric.Object
参数
-
callbacks – 该参数是一个带有回调函数的对象,可以使用
更改与动画相关的某些属性。
使用拉直方法
示例
让我们看一个代码示例,了解使用 straighten 方法时 Image 对象如何显示
用于代替fxstraighten。这将帮助我们认识到它们之间的区别。
straighten 方法只是straighten将对象从当前角度旋转到
0、90,180、270 等,具体取决于哪一个更接近。然而,fxstraighten适用于
同样的方式,但有动画。
<!DOCTYPE html> <html> <head> <!-- Adding the Fabric JS Library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Using the Straighten method</h2> <p> You can see that there is no animation but the image has been straightened </p> <canvas id="canvas"></canvas> <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="max-width:90%" / alt="如何使用 FabricJS 拉直带有动画的图像?" > <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiating the image element var imageElement = document.getElementById("img1"); // Initiate an Image object var image = new fabric.Image(imageElement, { top: 10, left: 110, skewX: 15, angle: 45, }); // Add it to the canvas canvas.add(image); // Using the straighten method image.straighten(); </script> </body> </html>
使用fxstraighten方法
示例
在此示例中,我们使用了fxstraighten方法来拉直图像对象
并显示一个简单的动画。图像对象具有 45 度角,
通过旋转回 0 度来拉直。除此之外,onChange 函数是
在动画的每一步都会调用,而 onComplete 函数仅在
动画完成,这就是为什么我们的图像对象最终被缩放
水平移动 1.5 倍并向左移动 130 的值。
<!DOCTYPE html> <html> <head> <!-- Adding the Fabric JS Library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Using the fxStraighten method</h2> <p> You can see that the image gets straightened while also displaying an animation </p> <canvas id="canvas"></canvas> <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="max-width:90%" / alt="如何使用 FabricJS 拉直带有动画的图像?" > <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiating the image element var imageElement = document.getElementById("img1"); // Initiate an Image object var image = new fabric.Image(imageElement, { top: 10, left: 110, skewX: 15, angle: 45, }); // Add it to the canvas canvas.add(image); // Using fxStraighten method image.fxStraighten({ onChange() { canvas.renderAll(); }, onComplete() { image.set("left", 130); image.set("scaleX", 1.5); canvas.renderAll(); }, }); </script> </body> </html>