Bagaimana untuk menetapkan sudut putaran segitiga menggunakan FabricJS?

Dalam tutorial ini, kami akan menetapkan sudut putaran segitiga menggunakan FabricJS. Segitiga adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta segitiga, kita perlu mencipta contoh kelas fabric.Triangle dan menambahnya pada kanvas. Sifat

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

Syntax

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

Parameter

• < strong>Pilihan (pilihan) - Parameter ini ialah Objek yang menyediakan penyesuaian tambahan kepada segi tiga kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan sifat lain bagi segi tiga yang berkaitan dengan sifat angle dan centeredRotation. < /p>

Kunci Pilihan

• Sudut - Sifat ini menerima Nombor, menyatakan sudut putaran segi tiga dalam darjah.

• centeredRotation - Sifat ini menerima boolean

Contoh 1

Sudut lulus sebagai kunci Gunakan nilai tersuai dan lumpuhkan putaran berpusat segitiga

Mari kita lihat contoh kod untuk menetapkan sudut putaran segi tiga dalam FabricJS. Sudut negatif menentukan arah lawan jam, manakala sudut positif menentukan arah jam. Memandangkan kami memberikan centeredRotation nilai palsu, segitiga akan diputar menggunakan titik sudutnya sebagai pusat putaran.

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


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：60，
宽度：100，
身高：70，
填写：“#deb887”，
居中旋转：假，
角度：15，
});

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

Contoh 2