Bagaimana untuk menetapkan faktor skala mendatar segitiga menggunakan FabricJS?

Dalam tutorial ini, kita akan belajar cara menetapkan faktor skala mendatar segitiga menggunakan FabricJS. Segitiga adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta segitiga, kita mesti mencipta contoh kelas fabric.Triangle dan menambahkannya pada kanvas.

Sama seperti kita boleh menentukan kedudukan, warna, kelegapan dan saiz objek segi tiga dalam kanvas, kita juga boleh menetapkan skala mendatar objek segi tiga. Ini boleh dilakukan menggunakan atribut scaleX.

Syntax

 new Fabric.Triangle({ scaleX : Number }: 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 scaleX ialah atribut, seperti warna, kursor, lebar lejang dan banyak sifat lain.

< /ul>

Kunci Pilihan

• scaleX - Hartanah ini menerima nilai numeric. Nilai yang ditetapkan menentukan faktor skala objek mendatar. Nilai lalainya ialah 1.

Contoh 1

Penampilan lalai apabila scaleX tidak digunakan

Mari kita lihat contoh kod yang menunjukkan rupa objek segitiga apabila sifat scaleX tidak digunakan Secara lalai, objek segi tiga mempunyai faktor skala mendatar 1. scaleX menentukan penjelmaan yang mengubah saiz objek di sepanjang paksi X.

不使用scaleX时的默认外观
您可以看到沿 x 轴没有调整大小


// 启动画布实例
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(三角形);

Salin selepas log masuk

Contoh 2

Melalukan atribut scaleX sebagai kunci

Dalam contoh ini, kita menghantar atribut scaleX sebagai kunci dengan nilai 2. Ini bermakna faktor skala objek segi tiga dalam arah mendatar adalah dua kali ganda.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk menetapkan faktor skala mendatar segitiga menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!