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 create a Line with dash pattern border using FabricJS?
In this tutorial, we are going to learn about how to create a Line with a dash pattern border 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.
In order to change the appearance of the dashes of border we use the borderDashArray property. However, our line object must have borders in order for this property to work. If the hasBorders property is assigned a false value, this property will not work.
Syntax
new fabric.Line(points: Array, { borderDashArray: 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 borderDashArray is a property.
Options Keys
borderDashArray ? This property accepts an Array which specifies the dash pattern by stating intervals via an array. 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.
Using borderDashArray with Custom Values
Let's see a code example to create a dash pattern border using borderDashArray property in FabricJS. In this example, we have used a [7,10] array which tells us that the pattern will be created by drawing a 7px long line and followed by a 10px gap and repeating this same pattern over and over.
<!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 borderDashArray as key with a custom value</h2>
<p>
You can select the line object to see the dash pattern
</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,
borderDashArray: [7, 10],
});
// Add it to the canvas
canvas.add(line);
</script>
</body>
</html>
When hasBorders is Set to False
As we can see in this example, even though we have assigned the properties borderColor and borderDashArray proper values, they don't work since the hasBorders property has been set to false. When set to false, the borders of an object are not rendered.
<!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 hasBorders key with the value "false"</h2>
<p>
You can select the line object to see the dash pattern is not visible
</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,
borderDashArray: [7, 10],
hasBorders: false,
});
// Add it to the canvas
canvas.add(line);
</script>
</body>
</html>
Key Points
- The
borderDashArrayproperty only works when the line object has borders enabled - The array values represent alternating dash and gap lengths in pixels
- Setting
hasBorders: falsewill disable all border properties includingborderDashArray - You must select the line object to see the dash pattern border effect
Conclusion
The borderDashArray property in FabricJS allows you to create customized dash patterns for line borders. Remember that borders must be enabled for this property to take effect, and the pattern is defined by alternating dash and gap pixel values.
439 Views
