Bagaimana untuk mengekalkan lebar lejang segitiga apabila menskala menggunakan FabricJS?

Dalam tutorial ini, kita akan belajar cara mengekalkan lebar lejang segitiga apabila menskala menggunakan FabricJS. Secara lalai, lebar lejang bertambah atau berkurang berdasarkan nilai skala objek. Walau bagaimanapun, kami boleh melumpuhkan tingkah laku ini dengan menggunakan atribut StrokeUniform.

Syntax

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

Parameter

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

Kunci Pilihan

• Seragam Lejang - Sifat ini menerima nilai Boolean yang membolehkan kita menentukan sama ada lebar lejang berskala dengan objek. Nilai lalainya ialah palsu. . Memandangkan kami tidak menggunakan atribut

  tripUniform
, lebar lejang juga akan dipengaruhi oleh penskalaan objek.

缩放对象时描边宽度的默认外观
选择三角形并尝试缩放它，可以看到缩放时描边宽度也发生变化


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：75，
宽度：90，
身高：80，
填写：“#ff878d”，
笔画: "#674846",
笔划宽度：5，
});

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

Contoh 2

Meluluskan strikeUniform

atribut sebagai kunci

Dalam contoh ini, kami menghantar atribut

strikeUniform

sebagai kunci dan Benar sebagai nilai. Akibatnya, lejang objek tidak lagi bertambah atau berkurang apabila objek diskalakan, yang akan memastikan bahawa lejang sentiasa sepadan dengan saiz piksel tepat yang dimasukkan untuk lebar lejang.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk mengekalkan lebar lejang segitiga apabila menskala menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!