如何在使用 FabricJS 中的 JSON.stringify() 時排除 Text 物件的儲存？

在本教程中，我們將學習如何在使用 FabricJS 中的 JSON.stringify() 時排除 Text 物件的儲存。我們可以透過新增 fabric.Text 例項來在畫布上顯示文字。它不僅允許我們移動、縮放和更改文字的尺寸，還可以新增其他功能。序列化用於匯出畫布內容。為此，我們使用 toObject() 和 toJSON() 方法。excludeFromExport 屬性允許我們在匯出時包含或省略物件。

語法

new fabric.Text(text: String , { excludeFromExport : Boolean }: Object)

引數

  • text − 此引數接受一個字串，即我們要顯示的文字字串。

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

選項鍵

  • excludeFromExport − 此屬性接受一個布林值。傳遞 true 值時，物件不會作為物件或 JSON 匯出。

示例 1

未使用 excludeFromExport 屬性時的日誌輸出

讓我們看一個程式碼示例，瞭解在不使用 excludeFromExport 屬性時的日誌輸出。在這種情況下，我們可以在瀏覽器控制檯（在開發者工具中可用）中看到該物件未被排除在匯出之外，並且以“type”：“text”開頭，因此表明了文字物件。

<!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>Logged output when excludeFromExport property is not used</h2>
   <p> You can open dev tools and see in console that the serialized text object is being logged </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 a text object
      var text = new fabric.Text("Add sample
text here", {
         left: 60,
         top: 50,
         width: 300,
         fill: "green",
         textAlign: "center",
      });

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

      // Using JSON.stringify method to serialize the canvas
      console.log(JSON.stringify(canvas));
   </script>
</body>
</html>

示例 2

使用 excludeFromExport 屬性時的日誌輸出

在此示例中，我們將看到如何透過使用 excludeFromExport 屬性並向其傳遞 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>Logged output when excludeFromExport property is used</h2>
   <p> You can inspect and see that the serialized text object is not being console logged </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 a text object
      var text = new fabric.Text("Add sample
text here", {
         left: 60,
         top: 50,
         width: 300,
         fill: "green",
         textAlign: "center",
         excludeFromExport: true,
      });

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

      // Using JSON.stringify method to serialize the canvas
      console.log(JSON.stringify(canvas));
   </script>
</body>
</html>

更新於: 2022年9月14日

瀏覽量 275

開啟你的職業生涯

透過完成課程獲得認證

開始學習
廣告
© . All rights reserved.