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 Image object vertically on current viewport of canvas using FabricJS?
In this tutorial, we are going to show how you can center an Image object vertically on current viewport of canvas using FabricJS. We can create an Image object by creating an instance of fabric.Image. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity etc. In order to center an Image object vertically on current viewport of canvas, we use the viewportCenterV method.
Syntax
viewportCenterV(): fabric.Object
Default Appearance of the Image Object
Let's see a code example to see how our Image object looks when the viewportCenterV method is not used. In this case, the image 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 Image object</h2>
<p>You can see the default appearance of Image object</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
});
// Add it to the canvas
canvas.add(image);
</script>
</body>
</html>
Using the viewportCenterV Method
Let's see a code example to see how the image object looks like when the viewportCenterV method is used. In this case, our image 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 image object is centered vertically with respect to the current viewport of canvas
</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
});
// Add it to the canvas
canvas.add(image);
// Using the viewportCenterV method
image.viewportCenterV();
</script>
</body>
</html>
Key Points
- The
viewportCenterVmethod centers the image object vertically within the current viewport of the canvas - This method returns the fabric object, allowing for method chaining
- The vertical centering is calculated based on the visible area of the canvas, not the entire canvas dimensions
- You must call this method after adding the image object to the canvas
Conclusion
The viewportCenterV method provides an easy way to vertically center Image objects in FabricJS. This method is particularly useful for creating balanced layouts and ensuring proper positioning of images within the canvas viewport.
353 Views
