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 Textbox using FabricJS?
In this tutorial, we are going to learn how we can implement the dash pattern of controlling corners of Textbox 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.Textbox(text: String, { cornerDashArray: Array }: Object)
Parameters
-
text ? This parameter accepts a String which is the text string that we want to display inside our textbox.
-
options (optional) ? This parameter is an Object which provides additional customizations to our textbox. 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 textbox 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 textbox 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 textbox object
var textbox = new fabric.Textbox("How high you fly is derived from how big you think.", {
backgroundColor: "rgba(204,255,0,0.2)",
width: 400,
top: 70,
left: 110,
cornerColor: "#87a96b",
});
// Add it to the canvas
canvas.add(textbox);
</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>You can select the textbox 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 textbox object
var textbox = new fabric.Textbox("How high you fly is derived from how big you think.", {
backgroundColor: "rgba(204,255,0,0.2)",
width: 400,
top: 70,
left: 110,
cornerColor: "#87a96b",
cornerDashArray: [1, 2, 1],
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Common Dash Patterns
Here are some common dash patterns you can use with the cornerDashArray property:
- [5, 5] - Equal 5px dashes and gaps
- [10, 2] - 10px dashes with 2px gaps
- [2, 3, 5] - 2px dash, 3px gap, 5px dash pattern
- [1, 1] - Dotted appearance with 1px dashes and gaps
Conclusion
The cornerDashArray property in FabricJS provides an effective way to customize the appearance of textbox controlling corners with dash patterns. By passing different array values, you can create various visual styles for the corner controls to match your application's design requirements.
216 Views
