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.

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>

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>

Updated on: 13-Sep-2022

116 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements