如何使用 FabricJS 停用 IText 的可選擇性？

在本教程中，我們將學習如何使用 FabricJS 停用 IText 的可選擇性。IText 類是在 FabricJS 1.4 版本中引入的，擴充套件了 fabric.Text，用於建立 IText 例項。IText 例項使我們能夠自由地選擇、剪下、貼上或新增新文字，而無需額外的配置。它還支援各種鍵盤組合和滑鼠/觸控組合，使文字具有互動性，而這些互動性在 Text 中是無法提供的。

然而，基於 IText 的文字框允許我們調整文字矩形的大小並自動換行。這對於 IText 來說是不正確的，因為高度不會根據行的換行進行調整。我們可以使用各種屬性來操作 IText 物件。為了修改物件，我們必須在 FabricJS 中選擇它。但是，我們可以使用 selectable 屬性更改此行為。

語法

new fabric.IText(text: String, { selectable: Boolean }: Object)

引數

  • text − 此引數接受一個字串，即我們希望在 IText 物件內顯示的文字字串。

  • options (可選) − 此引數是一個物件，它為我們的物件提供了額外的自定義選項。使用此引數可以更改與物件相關的顏色、游標、筆觸寬度和許多其他屬性，其中 selectable 是一個屬性。

選項鍵

  • selectable − 此屬性接受一個布林值。當為其分配“false”值時，該物件無法被選中進行修改。其預設值為 true。

示例 1

預設行為或 selectable 屬性設定為“true”時

讓我們看一個程式碼示例來了解當 selectable 屬性預設設定為 true 時物件的行為。當 selectable 屬性設定為 true 時，我們允許選擇一個物件，將其移動到畫布周圍並對其進行修改。

<!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>Default behaviour or when selectable property is set to ‘true’</h2>
   <p>You can try moving the itext object around the canvas or scaling it to prove that it's selectable</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: 50,
            top: 70,
            fill: "#6ae18b",
         }
      );

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

示例 2

將 selectable 屬性作為鍵傳遞，值為“false”

在此示例中，我們將“false”值分配給 selectable 屬性。這意味著我們不能再選擇 IText 物件進行修改。

<!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>Passing selectable property as key with “false” value</h2>
   <p>You can see that the itext object is no longer selectable</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: 50,
            top: 70,
            fill: "#6ae18b",
            selectable: false,
         }
      );

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

更新於: 2022-09-12

252 次瀏覽

啟動你的 職業生涯

透過完成課程獲得認證

開始學習
廣告