Home > Article > Web Front-end > FabricJS - How to vertically center a Line object on the canvas?
FabricJS - How to vertically center a Line object on the canvas?
- PHPzforward
- 2023-09-03 15:17:02983browse
In this tutorial, we will learn how to vertically center lines on a 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 vertically on the canvas, we use the centerV method.
Syntax
centerV()
Default appearance of Line objects
Example
Let’s look at a code example without using centerV method is the appearance of our line object. In this case, the line 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 Line object</h2>
<p>
You can see that the line object has not been centered vertically 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);
</script>
</body>
</html>
Use centerVmethod
Example
In this example we will see how by using the centerV method we are able to place a line object exactly in the vertical center of the canvas. In this case, the object is centered 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 centerV method</h2>
<p>
You can see that the line object has been centered vertically 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 the centerV() method to center line object vertically
line.centerV();
</script>
</body>
</html>
The above is the detailed content of FabricJS - How to vertically center a Line object on the canvas?. For more information, please follow other related articles on the PHP Chinese website!