Bagaimana untuk menetapkan sudut putaran segi empat tepat menggunakan FabricJS?

Dalam tutorial ini, kami akan menetapkan sudut putaran 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. Sifat

angle mentakrifkan sudut putaran 2D objek dalam FabricJS. Kami juga mempunyai sifat centeredRotation yang membolehkan kami menggunakan titik tengah segi empat tepat sebagai asal usul transformasi.

Syntax

new Fabric.Rect({ angle: Number, centeredRotation: Boolean }: Object)

Parameter

• Pilihan (pilihan) - Parameter ini ialah objek, iaitu segi empat tepat kami. Menggunakan parameter ini, anda boleh menukar sifat seperti warna, kursor, lebar lejang dan banyak sifat lain yang berkaitan dengan segi empat tepat yang sudut dan berpusatPutaran adalah sifat.

Kunci Pilihan

• Sudut - Sifat ini menerima nomborsudut putaran segi empat tepat dalam darjah.

• centeredRotation - Hartanah ini menerima nilai boolean yang menentukan sama ada pusat segi empat tepat ialah asal transformasi.

Contoh 1

Sudut lulus sebagai kunci dengan nilai tersuai dan lumpuhkan putaran berpusat segi empat tepat

Mari kita lihat contoh kod untuk menetapkan sudut putaran segi empat tepat dalam FabricJS. Sudut negatif menentukan arah lawan jam, manakala sudut positif menentukan arah jam. Memandangkan kami memberikan centeredRotation nilai Palsu, segi empat tepat akan diputar sambil menggunakan bucunya sebagai pusat putaran.

将角度作为带有自定义值的键并禁用矩形的居中旋转
旋转矩形可以看到其居中旋转已被禁用。


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

// 初始化一个矩形对象
var 矩形 = 新的布料. 矩形({
左：125，
顶部：90，
宽度：170，
身高：70，
填写：“#cf1020”，
居中旋转：假，
角度：15，
});

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

Contoh 2

Dayakan putaran berpusat segi empat tepat

Dari contoh ini kita dapat melihat bahawa dengan menetapkan sifat Putaran berpusat kepada benar, kita Segi empat tepat kini menggunakan pusatnya sebagai pusat putaran. Sebelum versi 1.3.4, centeredScaling dan centeredRotation terkandung dalam pakej yang dipanggil pusatUbah.

rreeee

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