Home > Article > Web Front-end > FabricJS - How to center a Line object vertically on the current viewport of the canvas?
FabricJS - How to center a Line object vertically on the current viewport of the canvas?
- WBOYforward
- 2023-09-14 12:41:091848browse
In this tutorial, we will learn how to vertically center a Line object 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 a fabric.Line instance, specifying the x and y coordinates of the line and adding it to the canvas. To center the Line object vertically on the current viewport of the canvas, we use the viewportCenterV method.
Syntax
viewportCenterV(): fabric.Object
Default appearance of Line objects
Example
Let’s look at a code example to see how it works without using viewportCenterV 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 is not centered vertically 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 viewportCenterVMethod
Example
Let’s look at a code example to see when Use the viewportCenterV method. In this case our line object will be vertically 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 viewportCenterV method</h2>
<p>
You can see that the line object is centered vertically 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 viewportCenterV method
line.viewportCenterV();
</script>
</body>
</html>
The above is the detailed content of FabricJS - How to center a Line object vertically on the current viewport of the canvas?. For more information, please follow other related articles on the PHP Chinese website!