如何使用 FabricJS 將物件新增至畫布？-js教程-PHP中文網

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

WBOY

發布： 2023-09-06 16:25:09

轉載

1395 人瀏覽過

如何使用 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>

登入後複製