Bagaimana untuk mengunci penskalaan menegak Segitiga menggunakan FabricJS?

Dalam tutorial ini, kita akan belajar cara mengunci penskalaan menegak segitiga menggunakan FabricJS. Sama seperti kita boleh menentukan kedudukan, warna, kelegapan dan saiz objek segi tiga dalam kanvas, kita juga boleh menentukan sama ada kita mahu berhenti menskala objek secara menegak. Ini boleh dilakukan menggunakan atribut lockScalingY.

Syntax

 new Fabric.Triangle({ lockScalingY : Boolean }: Object)

Parameter

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

Kunci Pilihan

• lockScalingY− Hartanah ini menerima nilai boolean. Jika kita memberikan nilai "benar", penskalaan menegak objek akan dikunci.

Contoh 1

Tingkah laku lalai objek Segitiga dalam kanvas

Mari kita lihat contoh kod untuk memahami kelakuan lalai objek Segitiga apabila sifat lockScalingY tidak digunakan. Menskala objek secara mendatar dan menegak adalah mungkin.

画布中 Triangle 对象的默认行为
您可以在水平和垂直方向上缩放三角形，以验证是否可以在两个方向上缩放。


// 启动画布实例
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

Melalui lockScalingY sebagai kunci dengan nilai "true"

Dalam contoh ini, kita akan melihat cara menggunakan sifat lockScalingY untuk menghentikan keupayaan objek segi tiga menegak. Seperti yang kita lihat, walaupun kita boleh menskalakan objek segi tiga secara mendatar, kita tidak dibenarkan melakukan operasi yang sama secara menegak.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk mengunci penskalaan menegak Segitiga menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!