search

Home  >  Article  >  Web Front-end  >  FabricJS - How to center Line object horizontally and vertically on canvas?

FabricJS - How to center Line object horizontally and vertically on canvas?

王林
王林forward
2023-09-07 10:37:02768browse

FabricJS – 如何使 Line 对象在画布上水平和垂直居中？

In this tutorial, we will learn how to center a Line object horizontally and vertically on 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 and vertically on the canvas, we use the center method.

grammar

center()

Default appearance of Line objects

Example

Let's look at a code example to see what our line object looks like without using the center method. In this case, the line 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 Line object</h2>
   <p>You can see that the line object is not centered</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: 20,
      });
      
      // Add it to the canvas
      canvas.add(line);
   </script>
</body>
</html>

UseCenterMethod

Example

In this example, we will see how by using the center method, we can place the line object exactly in the center of the canvas. In this case, the object is centered horizontally and vertically. 

<!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 center method</h2>
   <p>You can see that the line object has been centered on the 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: 20,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using center() to center the line object on the canvas
      line.center();
   </script>
</body>
</html>

The above is the detailed content of FabricJS - How to center Line object horizontally and vertically on 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：Robotics: Build autonomous robots with Raspberry Pi and JavaScriptNext article：Robotics: Build autonomous robots with Raspberry Pi and JavaScript

Related articles

See more