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

In this tutorial, we are going to learn about how to get the left 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 left boundary of a word by using the findWordBoundaryLeft method

Syntax

findWordBoundaryLeft(startFrom: Number): Number

Parameters

  • startFrom − This parameter accepts a Number which denotes the current selection index for which the new selection index value of left boundary of that word will be returned.

Example 1

Using the findWordBoundaryLeft method

Let’s see a code example to see the logged output when the findWordBoundaryLeft method is used. Here, we have passed the value as 5 which means we want to check the left boundary for the second word. Hence the returned value will be 4.

<!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 findWordBoundaryLeft method</h2>
   <p> You can open console from dev tools and see that the left 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: 110,
         top: 70,
         fill: "red",
      });

      // Add it to the canvas
      canvas.add(itext);

      // Using findWordBoundaryLeft method
      console.log("The new selection index is: ",
      itext.findWordBoundaryLeft(5));
   </script>
</body>
</html>

Example 2

Using the findWordBoundaryLeft method to calculate the word boundary for the last word

Let’s see a code example to see how we can find the new selection index for the last word by using the findWordBoundaryLeft method. In this case, we have passed the startFrom parameter a value of 17 which denotes the last word. Therefore, the new selection index value returned will be 16 which is the left boundary of last word.

<!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 findWordBoundaryLeft method to calculate the word boundary for the last word</h2>
   <p> You can open console from dev tools and see that the left 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: 110,
         top: 70,
         fill: "red",
      });

      // Add it to the canvas
      canvas.add(itext);

      // Using findWordBoundaryLeft method
      console.log("The new selection index is: ",
      itext.findWordBoundaryLeft(17));
   </script>
</body>
</html>

Updated on: 13-Sep-2022

150 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements