search

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

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

WBOY
WBOYforward
2023-09-11 14:21:111524browse

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

In this tutorial we will show how to vertically center an image object 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 also Easily customize it by applying properties such as angle, opacity, and more. To center the image The object is vertical on the current viewport of the canvas, we use the viewportCenterV method.

grammar

viewportCenterV(): fabric.Object

Default appearance of Image object

Example

Let's look at a code example to see how our Image object looks when using the viewportCenterV method Unused. In this case, the image object will not be vertically 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 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>

Use viewportCenterVMethod

Example

Let’s look at a code example to see where the image object is Use the viewportCenterV method. In this case our image object will be centered Vertical 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 viewportCenterV method</h2>
   <p>
      You can see that the image object is centered vertically 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 viewportCenterV method
      image.viewportCenterV();
   </script>
</body>
</html>

in conclusion

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

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

对象 fabric
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to stop event propagation using inline onclick attribute in JavaScript?Next article：How to stop event propagation using inline onclick attribute in JavaScript?

Related articles

See more