How to get the left boundary of a word in IText using FabricJS?-JS Tutorial-php.cn

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

WBOY

Release： 2023-09-10 14:21:05

forward

1170 people have browsed it

如何使用 FabricJS 获取 IText 中单词的左边界？

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

Copy after login

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.

<!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>

Copy after login

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.

<!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>

Copy after login

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!