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 set the padding of a Triangle using FabricJS?
In this tutorial, we are going to learn how to set the padding of a Triangle using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we will have to create an instance of fabric.Triangle class and add it to the canvas.
Just as we can specify the position, colour, opacity and dimension of a triangle object in the canvas, we can also set the padding of a triangle object. This can be done by using the padding property.
Syntax
new fabric.Triangle({ padding : Number }: Object)
Parameters
-
Options (optional) ? This parameter is an Object which provides additional customizations to our triangle. Using this parameter, properties such as colour, cursor, stroke width, and a lot of other properties can be changed related to the object of which padding is a property.
Options Keys
-
padding ? This property accepts a Number value which allows us to set the distance between the triangle object and its controlling borders.
Example 1: Default Appearance Without Padding
Let's see a code example that displays the appearance of our triangle object when the padding property is not used. As we can see, there is no space between the object and its surrounding controlling borders. This means that there is zero padding between the triangle and its controlling borders.
<!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 when padding is not used</h2>
<p>You can select the triangle to see there is no space between the object and its controlling borders</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 triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 70,
width: 90,
height: 80,
fill: "#746cc0",
stroke: "#967bb6",
strokeWidth: 5,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Example 2: Adding Padding to Triangle
In this example, we are passing the padding property as key with a value 7. This indicates that there will be a 7px distance between the triangle object and all of its controlling borders.
<!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>Passing padding property as key</h2>
<p>Select the triangle to see the padding between the object and its controlling borders.</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 triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 70,
width: 90,
height: 80,
fill: "#746cc0",
stroke: "#967bb6",
strokeWidth: 5,
padding: 7,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Key Points
The padding property affects the distance between the triangle and its selection controls
Padding is measured in pixels and accepts positive number values
By default, triangle objects have zero padding
Padding is most visible when the object is selected and shows its controlling borders
Conclusion
The padding property in FabricJS allows you to control the spacing between triangle objects and their selection controls. This feature is useful for creating better visual separation and improving user interaction with canvas elements.
232 Views
