Bagaimana untuk menetapkan sudut kecondongan paksi-x segi empat tepat menggunakan FabricJS?

Dalam tutorial ini, kita akan belajar cara menetapkan sudut kecondongan paksi-x bagi segi empat tepat 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.

Objek segi empat tepat kami boleh disesuaikan dalam pelbagai cara, seperti menukar dimensinya, menambah warna latar belakang atau menukar sudut kecondongan pada paksi-x. Kita boleh melakukannya dengan menggunakan atribut skewX.

Syntax

new Fabric.Rect({ skewX : Number }: Object )

Parameter

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

ul>

Kunci Pilihan

• skewX - Sifat ini menerima nombor yang menentukan sudut senget pada paksi X objek.

Contoh 1

Digunakan apabila sifat skewX tidak ditetapkan

Mari kita lihat contoh kod untuk melihat cara objek segi empat tepat dipaparkan apabila sifat skewX tidak digunakan. Dalam kes ini, objek segi empat tepat kami tidak akan kelihatan condong pada mana-mana sudut.

未应用 skewX 属性时
可以看到默认情况下矩形上任何角度都没有倾斜


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

// 初始化一个矩形对象
var 矩形 = 新的布料. 矩形({
左：105，
顶部：70，
宽度：170，
身高：70，
填写：“#8f9779”，
笔画：“#8fbc8f”，
笔划宽度：9，
});

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

Contoh 2

Lepasi skewX sebagai kunci dan tetapkan nilai tersuai.

Dalam contoh ini kita akan melihat bagaimana untuk menetapkan nilai berangka kepada skewX harta benda. Nilai yang dilalui akan menentukan kecondongan di sepanjang paksi X.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk menetapkan sudut kecondongan paksi-x segi empat tepat menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!