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 dash pattern of controlling corners of Triangle using FabricJS?
In this tutorial, we are going to learn how we can implement the dash pattern of controlling corners of Triangle 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 also specify a dash pattern for the controlling corners by using the cornerDashArray property.
Syntax
new fabric.Triangle({ cornerDashArray: Array }: 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 cornerDashArray is 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.
Example 1: Default Appearance of Controlling Corners
Let's see a code example that depicts the default appearance of the controlling corners of a triangle 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>Select the triangle to see the default appearance of the 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 triangle object
var triangle = new fabric.Triangle({
left: 155,
top: 60,
width: 100,
height: 70,
fill: "#5f9ea0",
cornerColor: "rgba(255,103,0,0.9)",
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Example 2: Using cornerDashArray Property
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>Select the triangle to see the appearance of the controlling corners with 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 triangle object
var triangle = new fabric.Triangle({
left: 155,
top: 60,
width: 100,
height: 70,
fill: "#5f9ea0",
cornerColor: "rgba(255,103,0,0.9)",
cornerDashArray: [1, 2, 1],
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Common Dash Patterns
Here are some commonly used dash patterns for controlling corners:
- [5, 5] ? Creates equal 5px dashes and 5px gaps
- [10, 2] ? Creates long 10px dashes with short 2px gaps
- [2, 2, 6, 2] ? Creates a complex pattern with varying dash and gap lengths
Conclusion
The cornerDashArray property in FabricJS allows you to customize the appearance of triangle controlling corners with dash patterns. This feature enhances the visual appeal and helps distinguish different objects in your canvas applications.
192 Views
