如何在FabricJS中获取IText中字符的完整样式声明？

在本教程中，我们将学习如何在FabricJS中获取IText中字符的完整样式声明。IText类是在FabricJS 1.4版本中引入的，它扩展了fabric.Text，用于创建IText实例。IText实例使我们能够自由地选择、剪切、粘贴或添加新文本，而无需额外的配置。它还支持各种快捷键和鼠标/触摸组合，使文本具有交互性，而这些功能在Text中是没有的。

然而，基于IText的文本框允许我们调整文本矩形的尺寸并自动换行。这对于IText来说是不正确的，因为高度不会根据换行进行调整。我们可以使用各种属性来操作IText对象。同样，我们可以使用getCompleteStyleDeclaration方法获取字符的完整样式声明。

语法

getCompleteStyleDeclaraction(lineIndex: Number, charIndex: Number): Object

参数

  • lineIndex − 此参数接受一个数字，指定所需字符的行号。

  • charIndex − 此参数接受一个数字，表示该字符在该行中的位置。

示例1

使用getCompleteStyleDeclaration方法

让我们来看一个代码示例，看看使用getCompleteStyleDeclaration方法时IText对象是什么样的。在这种情况下，我们将返回第0行的第2个字符的完整样式声明。该字符已被分配了一个浅黄色的文本背景颜色。

<!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 getCompleteStyleDeclaration method</h2>
   <p>You can open console from dev tools and see the style declaration for 2nd character of the first line</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.
Lorem ipsum dolor sit amet
consectetur adipiscing elit.",{
            width: 300,
            left: 60,
            top: 70,
            fill: "red",
            styles: {
               0: {
                  1: {
                     textBackgroundColor: "rgba(253,255,214,0.9)",
                  },
               },
            },
         }
      );

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

      // Using getCompleteStyleDeclaration method
      console.log(
         "The style object is as follows: ",
         itext.getCompleteStyleDeclaration(0, 1)
      );
   </script>
</body>
</html>

示例2

使用getCompleteStyleDeclaration方法进行比较

让我们来看一个代码示例，比较两行中两个相同索引的字符的样式声明。在这种情况下，我们选择了第1行和第2行的第二个字符，因此它们以不同的文本背景颜色突出显示。由于我们为这两个字符指定了不同的填充颜色、textBackgroundColor和fontSize，这些值将反映在我们的控制台中，我们将能够比较这些更改。

<!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 getCompleteStyleDeclaration method for comparison</h2>
   <p>You can open console from dev tools and see the style declaration for both lines</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.
Lorem ipsum dolor sit amet",{
            width: 300,
            left: 60,
            top: 70,
            fill: "red",
            styles: {
               0: {
                  1: {
                     textBackgroundColor: "rgba(130,111,201,0.6)",
                     fontSize: 30,
                     fill: "black",
                  },
               },
               1: {
                  1: {
                     textBackgroundColor: "rgba(52,235,189,0.5)",
                     fontSize: 90,
                     fill: "green",
                  },
               },
            },
         }
      );

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

      // Using getCompleteStyleDeclaration method
      console.log(
         "The style object for 2nd character of 1st line is as follows: ",
         itext.getCompleteStyleDeclaration(0, 1)
      );
      console.log(
         "The style object for 2nd character of 2nd line is as follows: ",
         itext.getCompleteStyleDeclaration(1, 1)
      );
   </script>
</body>
</html>

更新于：2022年9月12日

173 次浏览

启动你的职业生涯

完成课程获得认证

开始学习
广告