How to check if an IText object has a specific style attribute using FabricJS?-JS Tutorial-php.cn

How to check if an IText object has a specific style attribute using FabricJS?

王林

Release： 2023-08-24 23:09:10

forward

1396 people have browsed it

如何使用 FabricJS 检查 IText 对象是否具有特定的样式属性？

In this tutorial, we will learn how to check if an IText object has a specific style attribute 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. Likewise, we can use the styleHas method to check if an IText object has a specific style attribute.

grammar

styleHas(property: String, lineIndex: Number): Boolean

Copy after login

parameter

property - This parameter accepts a String representing the property that must be checked.
ineIndex - This parameter accepts a Number, indicating the index at which the style is to be checked.

Example 1

Use styleHas method

Let's look at a code example to see the output logged when using the styleHas method. In this example, we check whether the padding attribute exists for the character at row 0 index. Since the value exists, a true value is returned in the console.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <scrip src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Using the styleHas method</h2>
   <p>You can open console from dev tools and see that a true 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 HereLorem ipsum ", {
         width: 300,
         left: 50,
         top: 70,
         fontSize: 30,
         fill: "red",
         backgroundColor: "#fedad2",
         angle: 25,
         styles: {
            0: {
               1: {
                  fill: "blue",
                  fontStyle: "bold",
               },
            },
         },
      });

      // Using the styleHas method
      console.log("Is fill property present? : ", itext.styleHas("fill", 0));

      // Add it to the canvas
      canvas.add(itext);
   </script>
</body>
</html>

Copy after login

Example 2

Use styleHas method to check for non-existent values

Let's look at a code example to see what the output logged looks like when using the styleHas method to check for a non-existent value. In this example, we check whether the fontSize attribute exists for the character in line 0. Since it does not exist, an error value is returned.

<!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 styleHas method to check for a value that is not present</h2>
   <p>You can open console from dev tools and see that a false 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 HereLorem ipsum ", {
         width: 300,
         left: 50,
         top: 70,
         fontSize: 30,
         fill: "red",
         backgroundColor: "#fedad2",
         angle: 25,
         styles: {
            0: {
               1: {
                  fill: "blue",
                  fontStyle: "bold",
               },
            },
         },
      });

      // Using the styleHas method
      console.log(
         "Is font size property present? : ",
          itext.styleHas("fontSize", 0)
      );

      // Add it to the canvas
      canvas.add(itext);
   </script>
</body>
</html>

Copy after login

The above is the detailed content of How to check if an IText object has a specific style attribute using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!