search

Home >Web Front-end >JS Tutorial >How to get correct bounds of words in IText using FabricJS?

How to get correct bounds of words in IText using FabricJS?

WBOY
WBOYforward
2023-08-30 20:57:021040browse

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

In this tutorial, we will learn how to get the correct boundaries of words 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 find the right boundary of a word using the findWordBoundaryRight method.

grammar

findWordBoundaryRight(startFrom: Number): Number

parameter

  • startFrom - This parameter accepts a Number representing the current selection index for which the new selection index of the right boundary value will be returned.

Example 1

Use findWordBoundaryRight method

Let's look at a code example to see the output logged when using the findWordBoundaryRight method. Here, we are passing a value of 5, which means we want to check the right boundary of the second word. So the return 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

Use the findWordBoundaryRight method to calculate the word boundary of the first word

Let's look at a code example on how to find the new selection index of the first word using the findWordBoundaryRight method. In this example, we passed the value 1 to the startFrom parameter, which will appear in the first word. Therefore, the new selection index value returned is 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 above is the detailed content of How to get correct bounds of words in IText using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Getting Started with Paper.js: Paths and GeometryNext article：Getting Started with Paper.js: Paths and Geometry

Related articles

See more