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
FabricJS – How to set the size of the controlling corners of a Line?
In this tutorial, we are going to learn how to set the size of the controlling corners of Line using FabricJS. The controlling corners of an object allow us to scale, stretch or change its position. We can customize our controlling corners in many ways such as adding a specific colour to it, changing its size etc. We can change the size by using the cornerSize property.
Syntax
new fabric.Line( points: Array, { cornerSize: Number }: Object)
Parameters
points ? This parameter accepts an Array of points which determines the (x1, y1) and (x2, y2) values, those being the x- and y-axis coordinates of the start and end of the line respectively.
options (optional) ? This parameter is an Object which provides additional customizations to our object. Using this parameter origin, stroke width and a lot of other properties can be changed related to the object of which
cornerSizeis a property.
Options Keys
cornerSize ? This property accepts a Number which allows us to manipulate the size of the controlling corners of a selected object. Its default value is 13.
Default size of the controlling corners
Let's see a code example that depicts the default size of the controlling corners of a line object when it is actively 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 size of the controlling corners</h2>
<p>You can select the line object to see the default size of controlling corners</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 Line object
var line = new fabric.Line([200, 100, 100, 40], {
stroke: "blue",
strokeWidth: 20,
});
// Add it to the canvas
canvas.add(line);
</script>
</body>
</html>
Passing cornerSize as key with a custom value
In this example, we are passing the cornerSize property as key with a value of 17. We can see how that changes the size of our controlling corners when the line object 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>Passing cornerSize as key with a custom value</h2>
<p>You can select the line object to see the size of controlling corners</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 Line object
var line = new fabric.Line([200, 100, 100, 40], {
stroke: "blue",
strokeWidth: 20,
cornerColor: "#87a96b",
cornerSize: 17,
});
// Add it to the canvas
canvas.add(line);
</script>
</body>
</html>
Conclusion
The cornerSize property in FabricJS allows you to customize the size of controlling corners on Line objects. Use larger values for easier interaction and smaller values for a more refined appearance.
666 Views
