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 Circle using FabricJS?
In this tutorial, we are going to learn how to set the padding of a Circle using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we will have to create an instance of fabric.Circle class and add it to the canvas. Just as we can specify the position, colour, opacity and dimension of a circle object in the canvas, we can also set the padding of a circle object. This can be done by using the padding property.
Syntax
new fabric.Circle({ padding : Number }: Object)
Parameters
-
options (optional) ? This parameter is an Object which provides additional customizations to our circle. 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. The value that is assigned determines the distance in pixels between the circle object and its controlling borders.
Example 1: Default Appearance Without Padding
Let's see a code that displays the appearance of our circle 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 circle 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>Setting the padding of circle using FabricJS</h2>
<p>Select the object and observe that there is no space between the object and its surrounding controlling borders. This is the default behavior. We haven't used any <b>padding</b> here. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
radius: 50,
fill: "#85bb65"
});
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Using Padding Property
In this example, we are passing the padding property as a key with a value of 10. This indicates that there will be a 10px distance between the circle object and all of its controlling borders. When you select the circle, you'll notice the extra space around the object.
<!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>Setting the padding of circle using FabricJS</h2>
<p>Select the object and notice the padding between the object and its controlling border. Here we have set the <b>padding</b> at 10px.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
padding: 10,
radius: 50,
fill: "#85bb65"
});
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Key Points
- The padding property creates space between the circle object and its selection controls
- Padding values are specified in pixels
- Higher padding values create more space around the object
- This property is useful for better object interaction and visual separation
Conclusion
The padding property in FabricJS provides control over the space between a circle object and its controlling borders. This enhances user interaction by creating visual separation between the object and its selection controls.
331 Views
