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 right boundary of a word in IText using FabricJS?
In this tutorial, we are going to learn about how to get the right boundary of a word 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 also find the right boundary of a word by using the findWordBoundaryRight method.
Syntax
findWordBoundaryRight(startFrom: Number): Number
Parameters
startFrom ? This parameter accepts a Number which denotes the current selection index for which the new selection index of right boundary value will be returned.
Return Value
Returns a Number representing the index position at the right boundary of the word containing the specified starting position.
Example 1: Using the findWordBoundaryRight method
Let's see a code example to see the logged output when the findWordBoundaryRight method is used. Here, we have passed the value as 5 which means we want to check the right boundary for the second word. Hence the returned value will be 10.
<!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 findWordBoundaryRight method</h2>
<p>You can open console from dev tools and see that the right boundary 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.", {
width: 300,
left: 60,
top: 70,
fill: "red",
});
// Add it to the canvas
canvas.add(itext);
// Using findWordBoundaryRight method
console.log("The new selection index is: ",
itext.findWordBoundaryRight(5));
</script>
</body>
</html>
The new selection index is: 10
Example 2: Using the findWordBoundaryRight method to calculate the word boundary for the first word
Let's see a code example to see how we can find the new selection index for the first word by using the findWordBoundaryRight method. In this case, we have passed the startFrom parameter a value of 1 which will be in first word. Therefore, the new selection index value returned will be 3 which is the right boundary.
<!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 findWordBoundaryRight method to calculate the word boundary for the first word</h2>
<p>You can open console from dev tools and see that the right boundary 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.", {
width: 300,
left: 60,
top: 70,
fill: "red",
});
// Add it to the canvas
canvas.add(itext);
// Using findWordBoundaryRight method
console.log("The new selection index is: ",
itext.findWordBoundaryRight(1));
</script>
</body>
</html>
The new selection index is: 3
How It Works
The findWordBoundaryRight method analyzes the text from the given starting position and moves rightward until it finds the end of the current word. Word boundaries are typically determined by spaces, punctuation, or the end of the text string.
Key Points
- The method returns the index position immediately after the last character of the word
- If the starting position is already at a word boundary, it may return the same position
- This method is useful for text selection and cursor positioning operations
Conclusion
The findWordBoundaryRight method in FabricJS IText provides precise control over text selection boundaries. It's essential for implementing advanced text editing features like word-based selection and navigation.
268 Views
