How to straighten an Image with animation using FabricJS?

FabricJS Javascript HTML5 Canvas

In this tutorial, we are going to learn how to straighten an Image with animation using FabricJS. We can create an Image object by creating an instance of fabric.Image. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity etc. In order to straighten an Image with animation, we use the fxStraighten method.

Syntax

fxStraighten(callbacks: Object): fabric.Object

Parameters

callbacks − This parameter is an Object with callback functions which can be used to change certain properties related to the animation.

Using the straighten method

Example

Let’s see a code example of how the Image object appears when the straighten method is used instead of fxstraighten. This will help us to realize the difference between them. The straighten method simply straightens the object rotating it from its current angle to 0, 90,180, 270 etc depending on which one is closer. However, fxstraighten works in the same way but with animation.


<!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="display: none" />
   <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>

Using the fxstraighten method

Example

In this example, we have used the fxstraighten method to straighten the image object and also display a simple animation. The image object has a 45 degree angle which gets straightened by rotating back to 0 degree. Along with this, the onChange function is invoked at every step of the animation while the onComplete function is invoked only at the completion of the animation which is why in the end, our image object is scaled horizontally by a factor of 1.5 and moves to the left by value of 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="display: none" />
   <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>

Rahul Gurung

Updated on: 28-Oct-2022

149 Views

Kickstart Your Career

Get certified by completing the course

Get Started