How to straighten an Image object using FabricJS?-JS Tutorial-php.cn

How to straighten an Image object using FabricJS?

WBOY

Release： 2023-09-14 16:53:02

forward

1433 people have browsed it

如何使用 FabricJS 拉直 Image 对象？

In this tutorial, we will learn how to straighten an image object using FabricJS. We can create an Image object by creating an instance of fabric.Image. Since it is one Basic elements of FabricJS, we can also easily customize it through the application Properties such as angle, opacity, etc. To straighten the image object, we use Straightening method.

grammar

straighten(): fabric.Object

Copy after login

Passing values to angle properties without using straighten method

Example

Let's look at a code example to see how our Image object looks when straighten Method is not used. straighten Method straighten by rotating an object from its position The current angle is 0, 90, 180, or 270, etc., depending on which angle is closer. angle Property sets the object's rotation angle in degrees. Here we specify The angle is 45. But since we didn't apply the straighten attribute, the rotation angle It will remain 45 degrees.

<!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>
      Passing the angle property a value without using the straighten method
   </h2>
   <p>You can see that the Image object has an angle of 45 degrees</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: 50,
         left: 110,
         angle: 45,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Copy after login

Using the straighten method

Example

Let's look at a code example to see what an Image object looks like when straighten Method used in conjunction with the angle property. Although we have set the angle Rotated to 45 degrees, our image object will straighten by rotating it back to 0 degree as we have used the straightening method.

<!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 the angle of rotation is 0 degree for the image object
   </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: 50,
         left: 110,
         angle: 45,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the straighten method
      image.straighten();
   </script>
</body>
</html>

Copy after login

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