How to straighten an image with animation using FabricJS?-JS Tutorial-php.cn

How to straighten an image with animation using FabricJS?

WBOY

Release： 2023-09-13 21:41:06

forward

935 people have browsed it

如何使用 FabricJS 拉直带有动画的图像？

In this tutorial we will learn how to use animation to straighten an image FabricJS. We can create an Image object by creating an instance of fabric.Image. since It is one of the basic elements of FabricJS and we can also customize it easily through the application Angle, opacity and other properties. To straighten the image with animation we use fxStraighten method.

grammar

fxStraighten(callbacks: Object): fabric.Object

Copy after login

parameter

callbacks - This parameter is an object with a callback function that can be used Change certain properties related to animation.

Use StraighteningMethod

Example

Let's look at a code example to see how an Image object is displayed when using the straighten method Used instead of fxstraighten. This will help us realize the difference between them. straighten The method just straighten rotates the object from the current angle to 0, 90,180, 270, etc. depending on which one is closer. However, fxstraighten applies to 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>

Copy after login

UsefxstraightenMethod

Example

In this example, we used the fxstraighten method to straighten the image object and displays a simple animation. The image object has a 45 degree angle, Straighten by rotating back to 0 degrees. Apart from that, the onChange function is It is called at every step of the animation, and the onComplete function is only called at The animation is complete, which is why our image object ends up being scaled Move horizontally 1.5 times and left by a 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>

Copy after login

The above is the detailed content of How to straighten an image with animation using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!