cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menetapkan pelapik bulatan menggunakan FabricJS?

Bagaimana untuk menetapkan pelapik bulatan menggunakan FabricJS?

WBOY
WBOYke hadapan
2023-08-25 10:45:051038semak imbas

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

Parameter

  • Pilihan (pilihan) - Parameter ini ialah objek 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.

    • ul>

    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>

    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!

对象 内边距 padding fabric
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bentuk atribut yang diperlukan menggunakan mesej pengesahan tersuai dalam HTML5Artikel seterusnya：Bentuk atribut yang diperlukan menggunakan mesej pengesahan tersuai dalam HTML5

Artikel berkaitan

Lihat lagi