search

Home >Web Front-end >JS Tutorial >FabricJS - How to center a Line object horizontally on the current viewport of the canvas?

FabricJS - How to center a Line object horizontally on the current viewport of the canvas?

WBOY
WBOYforward
2023-09-01 13:41:021356browse

FabricJS – 如何将 Line 对象水平居中在画布的当前视口上？

In this tutorial, we will learn how to center a Line object horizontally on the current viewport of the canvas using FabricJS. Line element is one of the basic elements provided in FabricJS. It is used to create straight lines. Since line elements are geometrically one-dimensional and contain no interiors, they are never filled. We can create a line object by creating an instance of fabric.Line, specifying the x and y coordinates of the line and adding it to the canvas. To center the Line object horizontally in the current viewport of the canvas, we use the viewportCenterH method.

grammar

viewportCenterH(): fabric.Object

Default appearance of Line objects

Example

Let's look at a code example to see what a Line object looks like without using the viewportCenterH method. In this case, the Line object will not be centered horizontally 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 Line object</h2>
   <p>
      You can see that the line object is not centered horizontally with respect to the current viewport of canvas
   </p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 6,
      });
      
      // Add it to the canvas
      canvas.add(line);
   </script>
</body>
</html>

Use viewportCenterH method

Example

Let's look at a code example to see what a line object looks like when using the viewportCenterH method. In this case, our line object will be horizontally centered 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 viewportCenterH method</h2>
   <p>
      You can see that the line object is centered horizontally with respect to the current viewport of canvas
   </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 6,
      });
   
      // Add it to the canvas
      canvas.add(line);
      
      // Using the viewportCenterH method
      line.viewportCenterH();
   </script>
</body>
</html>

The above is the detailed content of FabricJS - How to center a Line object horizontally on the current viewport of the canvas?. 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：Explain the different types of generators in JavaScriptNext article：Explain the different types of generators in JavaScript

Related articles

See more