Bagaimana untuk menambah objek ke kanvas menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menambah objek ke kanvas menggunakan FabricJS?

WBOY

Lepaskan： 2023-09-06 16:25:09

ke hadapan

1372 orang telah melayarinya

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

Salin selepas log masuk

Output
Contoh 2: Cipta objek dan kemudian tambahkannya pada kanvas

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>

Salin selepas log masuk

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!