如何在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 次瀏覽

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告