Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan pelapik bulatan menggunakan FabricJS?
Bagaimana untuk menetapkan pelapik bulatan menggunakan FabricJS?
- WBOYke hadapan
- 2023-08-25 10:45:05993semak imbas
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>Padding - Hartanah ini menerima nilai numerik. Nilai yang ditetapkan menentukan jarak antara objek bulat dan kotak sempadan kawalannya.
Kunci Pilihan
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'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.
rreeeeAtas ialah kandungan terperinci Bagaimana untuk menetapkan pelapik bulatan menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!