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 check if an IText object has a particular style property using FabricJS?
In this tutorial, we are going to learn about how to check if an IText object has a particular style property using FabricJS. The IText class was introduced in FabricJS version 1.4, extends fabric.Text and is used to create IText instances. An IText instance gives us the freedom to select, cut, paste or add new text without additional configurations. There are also various supported key combinations and mouse/touch combinations which make text interactive which are not provided in Text.
Textbox, however, which is based on IText allows us to resize the text rectangle and wraps lines automatically. This is not true for IText as height is not adjusted based on the wrapping of lines. We can manipulate our IText object by using various properties. Likewise, we can check if an IText object has a particular style property by using the styleHas method.
Syntax
styleHas(property: String, lineIndex: Number): Boolean
Parameters
property ? This parameter accepts a String which denotes the property for which the check has to be made.
lineIndex ? This parameter accepts a Number which denotes an index where the style is to be checked.
Example 1: Using the styleHas Method
Let's see a code example to see the logged output when the styleHas method is used. In this case, we are checking if the fill property is present for a character in the 0th line index. Since the value is present, a true value is returned in the console.
<!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>Using the styleHas method</h2>
<p>You can open console from dev tools and see that a true value is being displayed in the console</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 an itext object
var itext = new fabric.IText("Add Sample Text Here\nLorem ipsum ", {
width: 300,
left: 50,
top: 70,
fontSize: 30,
fill: "red",
backgroundColor: "#fedad2",
angle: 25,
styles: {
0: {
1: {
fill: "blue",
fontStyle: "bold",
},
},
},
});
// Using the styleHas method
console.log("Is fill property present? : ", itext.styleHas("fill", 0));
// Add it to the canvas
canvas.add(itext);
</script>
</body>
</html>
Is fill property present? : true
Example 2: Checking for Non-existent Property
Let's see a code example to see how the logged output looks like when the styleHas method is used to check for a value that is not present. In this case, we are checking whether the fontSize property is present for a character in the 0th line. Since it is not present, a false value is returned.
<!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>Using the styleHas method to check for a value that is not present</h2>
<p>You can open console from dev tools and see that a false value is being displayed in the console</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 an itext object
var itext = new fabric.IText("Add Sample Text Here\nLorem ipsum ", {
width: 300,
left: 50,
top: 70,
fontSize: 30,
fill: "red",
backgroundColor: "#fedad2",
angle: 25,
styles: {
0: {
1: {
fill: "blue",
fontStyle: "bold",
},
},
},
});
// Using the styleHas method
console.log(
"Is font size property present? : ",
itext.styleHas("fontSize", 0)
);
// Add it to the canvas
canvas.add(itext);
</script>
</body>
</html>
Is font size property present? : false
How It Works
The styleHas method checks if a specific style property exists in the styles object at a given line index. It only checks for properties that are explicitly set in the styles configuration, not the default properties applied to the entire IText object.
Conclusion
The styleHas method provides an efficient way to check if specific style properties exist for characters in a particular line of an IText object. This is useful when working with complex text formatting and conditional styling in FabricJS applications.
286 Views
