Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to center an object vertically with respect to current viewport of canvas in IText using FabricJS?
In this tutorial, we are going to learn about how to center an object vertically with respect to current viewport of canvas in IText using FabricJS. The IText class was introduced in FabricJS version 1.4, extends fabric.Text and is used to create IText instances. An IText instance gives us the freedom to select, cut, paste or add new text without additional configurations. There are also various supported key combinations and mouse/touch combinations which make text interactive which are not provided in Text.
Textbox, however, which is based on IText allows us to resize the text rectangle and wraps lines automatically. This is not true for IText as height is not adjusted based on the wrapping of lines. We can manipulate our IText object by using various properties. Likewise, we can center an object vertically with respect to current viewport of canvas by using the viewportCenterV method.
Syntax
viewportCenterV(): fabric.Object
This method centers the object vertically within the current viewport of the canvas and returns the fabric object for method chaining.
Example 1: Default IText Position
Let's see a code example to see how our IText object looks when the viewportCenterV method is not used. In this case, the itext object will not be centered vertically 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 IText object</h2>
<p>You can see that the itext object has not been 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 an itext object
var itext = new fabric.IText("Add sample text here.", {
width: 300,
left: 50,
top: 70,
fill: "red",
});
// Add it to the canvas
canvas.add(itext);
</script>
</body>
</html>
Example 2: Using viewportCenterV Method
Let's see a code example to see how the IText object looks like when the viewportCenterV method is used. In this case, our IText object will be centered vertically with respect 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 itext object has been 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 an itext object
var itext = new fabric.IText("Add sample text here.", {
width: 300,
left: 50,
top: 70,
fill: "red",
});
// Add it to the canvas
canvas.add(itext);
// Using the viewportCenterV method
itext.viewportCenterV();
</script>
</body>
</html>
Key Points
- The
viewportCenterV()method only centers the object vertically, not horizontally - This method works with the current viewport of the canvas, not the entire canvas dimensions
- The method returns the fabric object, allowing for method chaining
- Call this method after adding the object to the canvas for proper positioning
Conclusion
The viewportCenterV() method provides an easy way to vertically center IText objects within the canvas viewport. This is particularly useful for creating balanced layouts and improving the visual presentation of text elements in FabricJS applications.
343 Views
