cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk menambah objek ke kanvas menggunakan FabricJS?

Bagaimana untuk menambah objek ke kanvas menggunakan FabricJS?

WBOY
WBOYke hadapan
2023-09-06 16:25:091421semak imbas

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

Dalam artikel ini, kami akan menggunakan kaedah add untuk menambah objek pada kanvas. Selepas mencipta kanvas, kita boleh mengisinya dengan pelbagai objek yang terdapat dalam FabricJS, seperti fabrik.Bulatan, fabrik.Elips atau fabrik.Garisan, dsb. Sintaks

sebaliknya Penciptaan mula-mula mendapat contoh objek dan kemudian memaparkannya ke kanvas menggunakan kaedah

add()

, yang boleh kita lakukan terus dalam kaedah

add()

. Berikut ialah contoh untuk menggambarkan - 
    canvas.add(object: fabric.Object);
  • Output

    Contoh 2: Cipta objek dan kemudian tambahkannya pada kanvas

    • Dalam contoh ini kita akan melihat cara mencipta objek menggunakan kelas
Fabric

Triangle Segi tiga objek dan tambahkannya pada kanvas. 

<!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>

output

Atas ialah kandungan terperinci Bagaimana untuk menambah objek ke kanvas menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Object 对象 canvas fabric
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Mendalami pemahaman anda tentang Webpack: Bahagian 2Artikel seterusnya：Mendalami pemahaman anda tentang Webpack: Bahagian 2

Artikel berkaitan

Lihat lagi