How to get the left boundary of a word in IText using FabricJS?

In this tutorial, we will learn how to get the left boundary of a word in IText using FabricJS. The IText class was introduced in FabricJS version 1.4, which extends Fabric.Text and is used to create IText instances. IText instances give us the freedom to select, cut, paste or add new text without additional configuration. There are also various supported key combinations and mouse/touch combinations to make text interactive that are not available in Text.

However, IText-based Textbox allows us to resize the text rectangle and wrap it automatically. This is not the case for IText, as the height does not adjust based on line breaks. We can manipulate IText objects by using various properties. Similarly, we can also use the findWordBoundaryLeft method to find the left boundary of the word

grammar

findWordBoundaryLeft(startFrom: Number): Number

parameter

• startFrom - This parameter accepts a Number, which represents the current selection index for which the new selection index value of the left boundary of the word will be returned.

Example 1

Use findWordBoundaryLeft method

Let's look at a code example to see the output logged when using the findWordBoundaryLeft method. Here, we are passing a value of 5, which means we want to check the left boundary of the second word. So the return value will be 4.

   
   



   
Using the findWordBoundaryLeft method
   
 You can open console from dev tools and see that the left boundary value is being displayed in the console 
   
   
   

Example 2

Use the findWordBoundaryLeft method to calculate the word boundary of the last word

Let's look at a code example on how to find the new selection index of the last word using the findWordBoundaryLeft method. In this example, we passed the value 17 to the startFrom parameter, which represents the last word. Therefore, the new selection index value returned is 16, which is the left boundary of the last word.

   
   



   
Using the findWordBoundaryLeft method to calculate the word boundary for the last word
   
 You can open console from dev tools and see that the left boundary value is being displayed in the console 
   

   

The above is the detailed content of How to get the left boundary of a word in IText using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!