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 border scale factor of Triangle using FabricJS?
In this tutorial, we are going to set the border scale factor of 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.
The borderScaleFactor property controls the thickness of the selection border that appears when an object is actively selected on the canvas. This property is particularly useful when you need to make selection borders more visible or adjust them for better user experience.
Syntax
new fabric.Triangle({ borderScaleFactor: 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 borderScaleFactor is a property.
Options Keys
-
borderScaleFactor ? This property accepts a Number which specifies the border thickness scale. The default value is 1, where higher values create thicker selection borders.
Example 1: Default borderScaleFactor Value
Let's see a code example that demonstrates the default behaviour of the borderScaleFactor property. The default value is 1, which creates a standard border thickness when the triangle 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>Default behaviour of borderScaleFactor property</h2>
<p>Select the triangle to see the default value of borderScaleFactor</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: 60,
width: 100,
height: 70,
fill: "#deb887",
borderColor: "red",
borderScaleFactor: 1,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Example 2: Increased borderScaleFactor
In this example, we increase the border thickness by setting borderScaleFactor to 5. This creates a much thicker selection border around the triangle when it's selected, making it more prominent.
<!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 borderScaleFactor as key</h2>
<p>Select the triangle to see the changed value of borderScaleFactor</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: 60,
width: 100,
height: 70,
fill: "#deb887",
borderColor: "red",
borderScaleFactor: 5,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Key Points
- The borderScaleFactor only affects the selection border, not the triangle's stroke
- Higher values create thicker borders, making objects easier to identify when selected
- This property works with borderColor to customize the appearance of selection borders
- The border is only visible when the object is actively selected on the canvas
Conclusion
The borderScaleFactor property in FabricJS allows you to control the thickness of selection borders around triangle objects. Use higher values for more prominent selection indicators and the default value of 1 for standard border thickness.
205 Views
