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 get the complete style declaration of character in IText using FabricJS?
In this tutorial, we are going to learn about how to get the complete style declaration of character in IText 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 get the complete style declaration of a character by using the getCompleteStyleDeclaration method.
Syntax
getCompleteStyleDeclaration(lineIndex: Number, charIndex: Number): Object
Parameters
lineIndex ? This parameter accepts a Number which specifies the line number of the required character.
charIndex ? This parameter accepts a Number which denotes the position of the character on that line.
Example 1
Using the getCompleteStyleDeclaration method
Let's see a code example to see how the IText object looks like when the getCompleteStyleDeclaration method is used. In this case, we will be returned the complete style declaration for the 2nd character of the 0th line. The character has been assigned a light yellow text background colour.
<!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 getCompleteStyleDeclaration method</h2>
<p>You can open console from dev tools and see the style declaration for 2nd character of the first line</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 dolor sit amet\nconsectetur adipiscing elit.",{
width: 300,
left: 60,
top: 70,
fill: "red",
styles: {
0: {
1: {
textBackgroundColor: "rgba(253,255,214,0.9)",
},
},
},
}
);
// Add it to the canvas
canvas.add(itext);
// Using getCompleteStyleDeclaration method
console.log(
"The style object is as follows: ",
itext.getCompleteStyleDeclaration(0, 1)
);
</script>
</body>
</html>
The console output will show a style object containing properties like textBackgroundColor, fill, fontSize, and other inherited styles for the character at line 0, position 1.
Example 2
Using the getCompleteStyleDeclaration method for comparison
Let's see a code example to compare the style declarations for two characters at the same index in two different lines. In this case, we have selected the second characters from line 1 and 2 and hence they have been highlighted with a different text background colour. Since we have specified a different fill colour, textBackgroundColor and fontSize for both of these characters, those values would be reflected in our console and we will be able to compare those changes.
<!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 getCompleteStyleDeclaration method for comparison</h2>
<p>You can open console from dev tools and see the style declaration for both lines</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 dolor sit amet",{
width: 300,
left: 60,
top: 70,
fill: "red",
styles: {
0: {
1: {
textBackgroundColor: "rgba(130,111,201,0.6)",
fontSize: 30,
fill: "black",
},
},
1: {
1: {
textBackgroundColor: "rgba(52,235,189,0.5)",
fontSize: 90,
fill: "green",
},
},
},
}
);
// Add it to the canvas
canvas.add(itext);
// Using getCompleteStyleDeclaration method
console.log(
"The style object for 2nd character of 1st line is as follows: ",
itext.getCompleteStyleDeclaration(0, 1)
);
console.log(
"The style object for 2nd character of 2nd line is as follows: ",
itext.getCompleteStyleDeclaration(1, 1)
);
</script>
</body>
</html>
This example demonstrates how different styles applied to characters at the same position in different lines will return different style objects. The console will show contrasting fontSize, fill, and textBackgroundColor values for each character.
Key Points
- The method returns a complete style object including all inherited styles
- Line indexing starts from 0 (first line is line 0)
- Character indexing starts from 0 (first character is position 0)
- If no custom styles are applied, the method returns default text properties
Conclusion
The getCompleteStyleDeclaration method is useful for retrieving comprehensive style information for specific characters in FabricJS IText objects. This enables dynamic text styling and analysis in interactive text editing applications.
313 Views
