Bagaimana untuk menjadikan sudut kawalan segi empat tepat telus menggunakan FabricJS?

Dalam tutorial ini, kita akan belajar cara membuat sudut kawalan Segiempat Telus menggunakan FabricJS. Segi empat tepat adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta segi empat tepat, kita mesti mencipta contoh kelas Fabric.Rect dan menambahkannya pada kanvas. Sifat transparentCorners membolehkan kami menjadikan sudut kawalan Segiempat Telus.

Syntax

new Fabric.Rect( {TransparentCorners: Boolean }: 对象）

Parameter

• Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada segi empat tepat kami. Menggunakan parameter ini, anda boleh menukar sifat berkaitan objek seperti warna, kursor, lebar lejang dan banyak sifat lain, transparentCorners ialah sifat objek ini.

ul>

Kunci Pilihan

• transparentCorners - Sifat ini menerima nilai Boolean yang membolehkan kita menjadikan sudut kawalan objek sebagai lutsinar. Nilai lalainya adalah benar.

Contoh 1

Melalukan sifat Sudut lutsinar sebagai kunci dengan nilai "palsu"

Mari kita lihat contoh kod untuk mencipta objek segi empat tepat dengan sudut kawalan legap. Untuk melakukan ini, kita perlu memberikan nilai Palsu kepada harta transparentCorners.

将透明角属性作为具有“False”值的键传递
您可以选择矩形以查看控制角是不透明的。


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

// 初始化一个矩形对象
var 矩形 = 新的布料. 矩形({
左：155，
顶部：70，
宽度：170，
身高：70，
填写：“#f4f0ec”，
笔画：“#2a52be”，
笔划宽度：5，
透明角：假，
});

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

Salin selepas log masuk

Contoh 2

Melalui sudut lutsinar sebagai kunci dengan nilai "Benar"

Dalam contoh ini, kami menghantar nilai sebenar kepada harta transparent Corners. Ini akan memastikan sudut kawalan dibuat telus. Ambil perhatian bahawa ini juga merupakan tingkah laku lalai.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk menjadikan sudut kawalan segi empat tepat telus menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!