How to center an Image object horizontally in the current viewport of the canvas using FabricJS?-JS Tutorial-php.cn

How to center an Image object horizontally in the current viewport of the canvas using FabricJS?

王林

Release： 2023-09-03 19:21:06

forward

1423 people have browsed it

如何使用 FabricJS 将 Image 对象在画布的当前视口中水平居中？

In this tutorial we will learn how to center an image object horizontally The current viewport of the canvas using FabricJS. We can create an Image object by An instance of fabric.Image. Since it is one of the basic elements of FabricJS, we can It can also be easily customized by applying properties such as angle, opacity, and more. Image object placed horizontally on the current viewport of the canvas, we use viewportCenterH method.

grammar

viewportCenterH(): fabric.Object

Copy after login

Default appearance of Image object

Example

Let’s look at a code example to see what happens when viewportCenterH Method is not used. In this case the image object will not be centered horizontally canvas.

<!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>Default appearance of the Image object</h2>
   <p>You can see the default appearance of 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,
      });
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Copy after login

Use viewportCenterHMethod

Example

Let’s look at a code example to see where the image object is Use the viewportCenterH method. In this case our image object will be centered horizontally with respect to the current viewport of canvas.

<!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 viewportCenterH method</h2>
   <p>
      You can see that the image object is centered horizontally with respect to the current viewport of canvas
   </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,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the viewportCenterH method
      image.viewportCenterH();
   </script>
</body>
</html>

Copy after login

in conclusion

In this tutorial, we use two examples to demonstrate how to center an image object Position the canvas horizontally on the current viewport using FabricJS.

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