Bagaimana untuk menetapkan kelegapan segitiga menggunakan FabricJS?

Dalam tutorial ini, kita akan belajar cara menetapkan kelegapan segitiga menggunakan FabricJS. Segitiga adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta segi tiga, kita mesti mencipta contoh kelas Fabric.Triangle dan menambahkannya pada kanvas. Kita boleh menyesuaikan objek segi tiga 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.Triangle({ opacity: Number }: Object)

Parameter

• Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan kepada segi tiga kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar sempadan dan banyak sifat lain yang berkaitan dengan objek yang kelegapannya adalah harta itu.

Option Key

• Opacity− Harta ini menerima nombor sebagai nilai yang membolehkan kita mengawal kelegapan objek. Nilai lalai bagi atribut kelegapan ialah 1.

Contoh 1

Kemunculan lalai objek Segitiga

Mari kita lihat contoh kod untuk melihat rupa objek Segitiga kita apabila menggunakan nilai lalai bagi sifat opacity. Kami tidak akan menghantar mana-mana kunci kelegapan kepada kelas seperti yang ditunjukkan dalam contoh berikut -

三角形对象的默认外观
请注意，三角形是完全不透明的。


// 启动画布实例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
画布.setHeight(250);

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：70，
宽度：90，
身高：80，
填写：“#746cc0”，
笔画：“#967bb6”，
笔划宽度：5，
});

// 将其添加到画布中
canvas.add(三角形);

Contoh 2

Melepasi sifat opacity sebagai kunci

Dalam contoh ini kita akan melihat bahawa sifat kelegapan diberikan Bagaimana nilai mengubah kelegapan objek segi tiga dalam kanvas. Di sini kita menggunakan 0.3 sebagai kelegapan, yang menjadikan objek segi tiga kita kelihatan separa telus dan bukannya legap sepenuhnya.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk menetapkan kelegapan segitiga menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!