首頁 >web前端 >js教程 >如何使用 FabricJS 將物件新增至畫布？

如何使用 FabricJS 將物件新增至畫布？

WBOY轉載: 2023-09-06 16:25:091410瀏覽

如何使用 FabricJS 将对象添加到画布？

在本文中，我們將使用 add# 方法將物件新增至畫布。建立畫布後，我們可以用 FabricJS 中可用的各種物件填充它，例如fabric.Circle、fabric.Ellipse 或fabric.Line 等。

語法

canvas.add(object: fabric.Object);

參數

Object - 該參數的類型為fabric.Object並儲存物件

範例1：在canvas.add() 中建立物件的實例

而不是建立首先取得物件的實例，然後使用add( ) 方法將其渲染到畫布上，我們可以直接在add() 方法中執行此操作。這是一個例子來說明-

<!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>
   <div style="padding: 10px; font-weight: bold">
      How to add an object to the canvas using FabricJS
   </div>

   <canvas
      id="canvas"
      width="500"
      height="300"
      style="border: 2px solid #000000">
   </canvas>

   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.add(
         new fabric.Circle({
            radius: 40,
            fill: "#9370db",
            top: 100,
            left: 100,
         })
      );
   </script>
</body>
</html>

輸出

如何使用 FabricJS 將物件新增至畫布？

#範例2：建立一個對象，然後將其加入到畫布

在在此範例中，我們將了解如何建立使用 Fabric.Triangle 類別建立一個三角形物件並將其新增到畫布中。

<!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>
   <div style="padding: 10px; font-weight: bold">
      How to add an object to the canvas using FabricJS
   </div>

   <canvas id="canvas" width="500" height="300" style="border: 2px solid #000000">
</canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      // Creating an instance of the fabric.Triangle class
      var triangle = new fabric.Triangle({
         width: 60,
         height: 70,
         fill: "#87a96b",
         left: 30,
         top:20
      });
      // Adding it to the canvas
      canvas.add(triangle);
   </script>
</body>
</html>

輸出

如何使用 FabricJS 將物件新增至畫布？

以上是如何使用 FabricJS 將物件新增至畫布？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

Object 对象 canvas fabric

陳述：

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

上一篇：加深對 Webpack 的理解：第 2 部分下一篇：加深對 Webpack 的理解：第 2 部分

看更多