Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan kelegapan elips menggunakan FabricJS?
Bagaimana untuk menetapkan kelegapan elips menggunakan FabricJS?
- WBOYke hadapan
- 2023-08-24 16:09:131194semak imbas
Dalam tutorial ini, kita akan belajar cara menetapkan kelegapan elips menggunakan FabricJS. Bujur adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta elips, kita mesti mencipta contoh kelas Fabric.Ellipse dan menambahkannya pada kanvas. Kita boleh menyesuaikan objek elips dengan menambahkan warna isian, mengalih keluar sempadannya dan juga menukar dimensinya. Begitu juga, kita juga boleh menggunakan sifat opacity untuk menukar kelegapannya.
Syntax
new fabric.Ellipse({ opacity: Number }: Object)Parameter
Pilihan (pilihan) - Parameter ini ialah Objek menyediakan penyesuaian tambahan pada elips kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar jidar dan banyak sifat lain yang berkaitan dengan objek yang opacity ialah atribut.
Option Key
Opacity - Harta ini menerima nombor强> yang membolehkan kita mengawal kelegapan objek. Nilai lalai bagi sifat opacity ialah 1.
Contoh 1
Kemunculan lalai objek elips
Mari kita lihat coretan kod untuk melihat rupa objek elips kita dengan nilai lalai bagi sifat opacity. Dalam contoh ini kita tidak menghantar sebarang kunci kelegapan kepada kelas seperti yang ditunjukkan di bawah -
<!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>How to set the opacity of Ellipse using FabricJS?</h2>
<p>Observe that here we have not used the <b>opacity</b> property, so by default, it takes the value 1. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 115,
top: 50,
rx: 80,
ry: 50,
fill: "#ff1493",
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Contoh 2
Melepasi atribut opacity sebagai kunci
Dalam contoh ini kita akan melihat cara untuk menetapkan nilai opacity harta mengubah kelegapan objek elips dalam kanvas. Di sini kita menggunakan 0.3 sebagai kelegapan supaya objek elips kita kelihatan separa lutsinar dan bukannya legap sepenuhnya. rreeee
Atas ialah kandungan terperinci Bagaimana untuk menetapkan kelegapan elips menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!