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 style of controlling corners of Textbox using FabricJS?
In this tutorial, we are going to learn how to set the style of controlling corners of Textbox using FabricJS. We can customize, stretch or move around the text written in a textbox. In order to create a textbox, we will have to create an instance of fabric.Textbox class and add it to the canvas. 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 change the style by using the cornerStyle property.
Syntax
new fabric.Textbox(text: String, { cornerStyle: String }: 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
cornerStyleis a property.
cornerStyle Property
The cornerStyle property accepts a String which allows us to specify the style of controlling corners that we want. It can have the following values:
- "rect" ? Default rectangular corners
- "circle" ? Circular corners
Example 1: Default Corner Style
Let's see a code example that shows the default style of controlling corners (rectangular).
<!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 style of controlling corners</h2>
<p>You can select the textbox to see the default style of controlling corners</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(600);
canvas.setHeight(250);
// Initiate a textbox object
var textbox = new fabric.Textbox("People are taking the comedians seriously and the politicians as a joke.", {
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: Circular Corner Style
We can specify the style or appearance of the controlling corners by passing the value as "circle". This will make the controlling corners appear circular, as shown in the example below:
<!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 cornerStyle as key with the value "circle"</h2>
<p>You can select the textbox to see that the corner style has changed to circle</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(600);
canvas.setHeight(250);
// Initiate a textbox object
var textbox = new fabric.Textbox("People are taking the comedians seriously and the politicians as a joke.", {
backgroundColor: "rgba(204,255,0,0.2)",
width: 400,
top: 70,
left: 110,
cornerColor: "#87a96b",
cornerStyle: "circle",
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Key Points
- The
cornerStyleproperty only affects the visual appearance of corners when the textbox is selected - Use "rect" for rectangular corners (default) or "circle" for circular corners
- Combine
cornerStylewithcornerColorfor better visual customization - The corner style helps improve the user interface when working with interactive textboxes
Conclusion
The cornerStyle property in FabricJS allows you to customize the appearance of textbox controlling corners. Use "circle" for rounded corners or "rect" for the default rectangular style to enhance your canvas interface.
420 Views
