首頁 > 文章 > web前端 > 如何使用 FabricJS 停用 IText 的選擇性？

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

王林轉載: 2023-08-24 20:13:021257瀏覽

如何使用 FabricJS 禁用 IText 的选择性？

在本教學中，我們將學習如何使用 FabricJS 來停用 IText 的選擇性。 IText 類別是在 FabricJS 版本 1.4 中引入的，它擴展了 Fabric.Text 並用於建立 IText 實例。 IText 實例使我們可以自由選擇、剪下、貼上或新增文本，而無需額外配置。還有各種支援的按鍵組合和滑鼠/觸控組合使文字具有互動性，而 Text 中未提供這些組合。

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

文法

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

參數

text - 此參數接受 String，它是我們要在 IText 物件中顯示的文字字串。
選項（可選） - 此參數是一個對象，它為我們的對象提供額外的自訂。使用此參數，可以變更與可選擇屬性的物件相關的顏色、遊標、描邊寬度和許多其他屬性。

選項鍵

selectable - 此屬性接受布林值。當為其指派“假”值時，無法選擇該物件進行修改。它的預設值為 true。

範例 1

預設行為或可選屬性設定為「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

將可選屬性作為具有「false」值的鍵傳遞

在此範例中，我們為可選屬性指派了一個假值。這意味著我們無法再選擇 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>

以上是如何使用 FabricJS 停用 IText 的選擇性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：用於在不交換資料的情況下交換鍊錶中的節點的 JavaScript 程序下一篇：用於在不交換資料的情況下交換鍊錶中的節點的 JavaScript 程序

看更多