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 an Ellipse using FabricJS?
In this tutorial, we are going to set the scale factor (border) of Ellipse using FabricJS. Ellipse is one of the various shapes provided by FabricJS. In order to create an ellipse, we have to create an instance of fabric.Ellipse class and add it to the canvas. We can use the borderScaleFactor property which specifies the scale factor of the object's controlling borders when selected.
Syntax
new fabric.Ellipse({ borderScaleFactor: Number }: Object)
Parameters
-
options (optional) ? This parameter is an Object which provides additional customizations to our ellipse. Using this parameter color, 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 of the selection controls. The default value is 1.
Example 1: Default borderScaleFactor Value
Let's see the default behaviour of the borderScaleFactor property. The default value is 1, which provides normal border thickness for the selection controls.
<!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>How to set the scale factor (border) of Ellipse using FabricJS?</h2>
<p>Select the object and observe its controlling borders. Here we have set the <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");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 215,
top: 100,
fill: "white",
rx: 90,
ry: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#966fd6",
borderScaleFactor: 1,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Custom borderScaleFactor Value
In this example, we increase the border thickness by setting borderScaleFactor to 5. This makes the selection controls more prominent when the ellipse is selected.
<!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>How to set the scale factor (border) of Ellipse using FabricJS?</h2>
<p>Select the object and observe its controlling borders. 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");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 215,
top: 100,
fill: "white",
rx: 90,
ry: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#966fd6",
borderScaleFactor: 5,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Key Points
- The borderScaleFactor property only affects the thickness of selection borders, not the ellipse's stroke
- Higher values make the selection controls more visible and easier to interact with
- This property is particularly useful when working with small objects or high-resolution displays
Conclusion
The borderScaleFactor property in FabricJS allows you to control the thickness of an ellipse's selection borders. Use higher values for better visibility of selection controls, especially with smaller objects.
240 Views
