Bagaimana untuk membuat kanvas dengan Bulatan menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk membuat kanvas dengan Bulatan menggunakan FabricJS?

WBOY

Lepaskan： 2023-09-09 23:05:03

ke hadapan

1318 orang telah melayarinya

如何使用 FabricJS 创建带有 Circle 的画布？

Dalam tutorial ini, kita akan belajar cara mencipta kanvas dengan objek Bulatan menggunakan FabricJS. Bulatan adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk membuat bulatan, kita mesti mencipta contoh kelas Fabric.Circle dan menambahkannya pada kanvas.

Syntax

new fabric.Circle({ radius: Number }: Object)

Salin selepas log masuk

Parameter

#🎜#🎜 pilihan (pilihan #🎜#🎜) # - Parameter ini ialah objek yang menyediakan penyesuaian tambahan kepada objek kami. Menggunakan parameter ini, anda boleh menukar sifat seperti warna, kursor, lebar lejang dan banyak sifat lain yang berkaitan dengan bulatan dengan atribut radius. < /em>
kunci pilihan

#🎜🎜🎜🎜🎜🎜#🎜 jejari # - Harta ini menerima
Nombor untuk menentukan jejari bulatan. Jika kita tidak menentukan jejari, bulatan tidak akan muncul pada kanvas. Contoh 1
Buat contoh Fabric.Circle() dan tambahkannya pada kanvas kami #🎜 🎜🎜#
Mari kita lihat contoh cara menambah bulatan pada kanvas. Di sini kita mencipta bulatan dengan jejari 50px. Atribut lejang mewakili warna sempadan, dan lebar lejang menentukan lebarnya. Kami mengisi objek kami dengan warna biru langit, yang nilai hexnya ialah

#80daeb

<!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>Creating a canvas with circle using FabricJS</h2>
         <p>Here we have created a circle of radius 50px over a canvas. In addition, we have used the <b>fill</b> and <b>stroke</b> properties to color its body and outline. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         
         // Creating an instance of the fabric.Circle class
         var circle = new fabric.Circle({
            left: 215,
            top: 100,
            radius: 50,
            fill: "#80daeb",
            stroke: "#00b7eb",
            strokeWidth: 2,
         });
         
         // Adding it to the canvas
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Salin selepas log masuk

Contoh 2Gunakan kaedah set untuk mengendalikan objek Bulatan #🎜🎜🎜🎜🎜🎜🎜 ini contoh, Kami menggunakan kaedah set yang merupakan penetap nilai. Sebarang sifat yang berkaitan dengan lejang, lebar lejang, jejari, skala, putaran, dsb. boleh ditukar menggunakan kaedah ini.

<!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>Creating a canvas with circle using FabricJS</h2>
      <p>Here we have used the <b>set</b> method to create a circle of radius 40px and then filled the object with a color. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle();
         canvas.add(circle);
         
         // Use set to set the properties
         circle.set("radius", 40);
         circle.set("fill", "green");
         circle.set({
            stroke: "rgba(133, 187, 101, 0.7)",
            strokeWidth: 4
         });
         circle.set("left", 50);
         circle.set("top", 50);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Salin selepas log masuk

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