search

Home >Web Front-end >JS Tutorial >How to center an Image object in the current viewport of the canvas using FabricJS?

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

WBOY
WBOYforward
2023-08-24 19:29:021505browse

如何使用 FabricJS 将 Image 对象置于画布当前视口的中心？

In this tutorial we will learn how to center an image object in the current viewport Draw the canvas using FabricJS. We can create an Image object by creating an instance fabric.image. Since it is one of the basic elements of FabricJS, we can also easily Customize it by applying properties such as angle, opacity, and more. To center the image For objects on the current viewport of the canvas, we use the viewportCenter method.

grammar

viewportCenter(): fabric.Object

Default appearance of Image object

Example

Let’s look at a code example to see what happens when viewportCenter Method is not used. In this case, the image object will not be centered on the 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 that the image object is not centered 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);
   </script>
</body>
</html>

Using viewportCenterMethod

Example

Let’s look at a code example to see where the image object is Use the viewportCenter method. In this case our image object will be Both vertical and horizontal directions are relative to the current viewport of the 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 viewportCenter method</h2>
   <p>
      You can see that the image object is centered 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 viewportCenter method
      image.viewportCenter();
   </script>
</body>
</html>

in conclusion

In this tutorial, we use two examples to demonstrate how to center or Use the current viewport on the FabricJS canvas.

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

对象
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to return true if bottom of page is visible using JavaScript?Next article：How to return true if bottom of page is visible using JavaScript?

Related articles

See more