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 dash pattern of the controlling corners of a Line?
In this tutorial, we are going to learn about how to set the dash pattern of controlling corners of Line using FabricJS. A Line element is one of the basic elements provided in FabricJS. It is used for creating straight lines. Because line elements are geometrically one-dimensional and do not contain an interior, they are never filled.
We can create a line object by creating an instance of fabric.Line, specifying the x and y coordinates of the line and adding it to the canvas. We can also specify a dash pattern for the controlling corners by using the cornerDashArray property.
Syntax
new fabric.Line(points: Array, {
cornerDashArray: Array
}: 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
cornerDashArrayis a property.
Options Keys
cornerDashArray ? This property accepts an Array which allows us to specify a dash pattern for the controlling corners. For example, if we pass an array with values [2,3], it means a dash pattern of 2px dash and 3px gap and repeating this pattern infinitely.
Default appearance of controlling corners
Let's see a code example that depicts the default appearance of the controlling corners of a line object. Since we have not used the cornerDashArray property, there is no dash pattern being displayed.
<!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 appearance of controlling corners</h2>
<p>You can select the line object to see the default appearance 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 cornerDashArray property as key
In this example, we are passing the cornerDashArray property a value of [1,2,1]. This means that a dash pattern will be created such that there is a 1px long line, followed by a 2px gap, then again a 1px long line will be drawn and after which a 1px gap will be made and so on.
<!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 cornerDashArray property as key</h2>
<p>You can select the line object to see the dash pattern 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",
cornerDashArray: [1, 2, 1],
});
// Add it to the canvas
canvas.add(line);
</script>
</body>
</html>
How the Dash Pattern Works
The cornerDashArray property creates alternating dashed and gap segments based on the array values:
[2, 3] - Creates a pattern of 2px dash followed by 3px gap
[1, 2, 1] - Creates 1px dash, 2px gap, 1px dash, 1px gap (repeats)
[5, 5] - Creates equal 5px dashes and 5px gaps
Conclusion
The cornerDashArray property in FabricJS provides fine control over the visual appearance of line object controlling corners. Use it to create custom dash patterns that match your design requirements.
280 Views
