Bagaimana untuk menetapkan pelapik bulatan menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menetapkan pelapik bulatan menggunakan FabricJS?

WBOY

Lepaskan： 2023-08-25 10:45:05

ke hadapan

1010 orang telah melayarinya

如何使用 FabricJS 设置圆的填充？

Dalam tutorial ini, kita akan belajar cara menetapkan pelapik 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. Sama seperti kita boleh menentukan kedudukan, warna, kelegapan dan saiz objek bulat dalam kanvas, kita juga boleh menetapkan isian objek bulat. Ini boleh dilakukan menggunakan atribut padding.

Syntax

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

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah objek< /em> yang menyediakan penyesuaian tambahan untuk kalangan kami. Menggunakan parameter ini, anda boleh menukar sifat yang berkaitan dengan objek yang padding ialah atribut, seperti warna, kursor, lebar lejang dan banyak sifat lain.

Kunci Pilihan

Padding - Hartanah ini menerima nilai numerik. Nilai yang ditetapkan menentukan jarak antara objek bulat dan kotak sempadan kawalannya.

Contoh 1

Penampilan lalai apabila padding tidak digunakan

Mari kita lihat kod yang memaparkan rupa objek bulat apabila atribut padding tidak digunakan. Seperti yang kita dapat lihat, tiada ruang antara objek dan sempadan kawalan sekelilingnya. Ini bermakna terdapat sifar padding antara bulatan dan kotak sempadan mengawalnya.

<!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>Setting the padding of circle using FabricJS</h2>
      <p>Select the object and observe that there is no space between the object and its surrounding controlling borders. This is the default behavior. We haven&#39;t used any <b>padding</b> here. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            radius: 50,
            fill: "#85bb65"
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Salin selepas log masuk

Contoh 2

Meluluskan harta padding sebagai kunci

Dalam contoh ini, kita menghantar harta padding sebagai kunci dengan nilai 7. Ini bermakna jarak antara objek bulat dan semua sempadan kawalannya ialah 7px.
rreeee
Atas ialah kandungan terperinci Bagaimana untuk menetapkan pelapik bulatan menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!