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 scale factor (border) of a Circle using FabricJS?
In this tutorial, we are going to set the scale factor (border) of Circle using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we have to create an instance of fabric.Circle class and add it to the canvas. We can use the borderScaleFactor property which specifies the scale factor of objects controlling borders.
Syntax
new fabric.Circle({ borderScaleFactor: 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 borderScaleFactor is a property.
Options Keys
-
borderScaleFactor ? This property accepts a Number which specifies the border thickness. The default value is 1.
Example 1: Default borderScaleFactor Behavior
Default behaviour of borderScaleFactor property
Let's see an example that depicts the default behaviour of the borderScaleFactor property. Although we have specified it in this example, by default, the value that borderScaleFactor uses even when unspecified is 1.
<!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 scale factor (border) of circle using FabricJS</h2>
<p>Select the object and notice its border. Here we have set <b>borderScaleFactor</b> at 1, which is the default value. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "white",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#966fd6",
borderScaleFactor: 1
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Using Custom borderScaleFactor Value
Passing borderScaleFactor as key
Let's see a code to increase the border thickness of the circle object when it is actively selected. In this example we have assigned the borderScaleFactor a value of 5, which specifies the thickness of our border.
<!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 scale factor (border) of a circle using FabricJS</h2>
<p>Select the object and notice the thickness of its border. Here we have set the <b>borderScaleFactor</b> at 5. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "white",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#966fd6",
borderScaleFactor: 5
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Key Points
-
The borderScaleFactor property controls the thickness of the selection border when an object is actively selected.
-
Higher values create thicker borders, while lower values create thinner borders.
-
This property only affects the visual appearance of the selection border, not the actual object stroke.
Conclusion
The borderScaleFactor property in FabricJS allows you to customize the thickness of selection borders for circle objects. By adjusting this value, you can create more prominent or subtle selection indicators based on your application's design requirements.
306 Views
