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 Circle using FabricJS?
In this tutorial, we are going to learn how we can implement the dash pattern of controlling corners of Circle 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.Circle({ cornerDashArray: Array }: Object)
Parameters
-
options (optional) ? This parameter is an Object which provides additional customizations to our circle. 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 an example that depicts the default appearance of the controlling corners of a circle 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>Setting dash pattern of controlling corners of circle using FabricJS</h2>
<p>Select the object and notice its controlling corners. Here we have not applied the <b>cornerDashArray</b> property, hence there is no dashed pattern. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "white",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
cornerColor: "rgb(255,20,147)"
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2
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, 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>Setting dash pattern of controlling corners of circle using FabricJS</h2>
<p>Select the object and notice the dashed pattern of its controlling corners. Here we have applied the <b>cornerDashArray</b> property and assigned it an array [1,2,1]. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "white",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
cornerColor: "rgb(255,20,147)",
cornerDashArray: [1, 2, 1]
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
How It Works
The cornerDashArray property accepts an array of numbers representing the dash pattern in pixels. The pattern alternates between dashes and gaps, repeating infinitely. Common patterns include:
-
[5, 5]- 5px dash, 5px gap -
[3, 1, 3]- 3px dash, 1px gap, 3px dash -
[10, 5, 2, 5]- Complex pattern with varying lengths
Conclusion
The cornerDashArray property in FabricJS allows you to customize the visual appearance of object controlling corners with dashed patterns. This feature enhances the visual feedback when users interact with objects on the canvas.
255 Views
