Bagaimana untuk mengekalkan lebar lejang segi empat tepat apabila menskala dengan FabricJS?-tutorial js-php.cn

Bagaimana untuk mengekalkan lebar lejang segi empat tepat apabila menskala dengan FabricJS?

WBOY

Lepaskan： 2023-08-23 08:57:29

ke hadapan

1056 orang telah melayarinya

Bagaimana untuk mengekalkan lebar lejang segi empat tepat apabila menskala dengan FabricJS?

Dalam tutorial ini, kita akan belajar cara mengekalkan lebar lejang segi empat tepat apabila menskala menggunakan FabricJS. Secara lalai, lebar lejang bertambah atau berkurang berdasarkan nilai skala objek. Walau bagaimanapun, kami boleh melumpuhkan kelakuan ini dengan menggunakan sifat strokeUniform

Sintaks

kain baharu.Rect({ strokeUniform: Boolean }: Object)

Salin selepas log masuk

Parameter< ;/ h2>
Pilihan (pilihan)− Parameter ini ialah objek yang menyediakan penyesuaian tambahan untuk takrifan segi empat tepat. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan banyak sifat lain yang berkaitan dengan sifat strokeUniform

Kunci Pilihan

strokeUniform< strong>− Sifat ini menerima Nilai Boolean, membolehkan kami menentukan sama ada lebar lejang berskala dengan objek. Nilai lalainya adalah palsu.

Contoh 1

Kemunculan lalai lebar lejang apabila menskala objek>

Mari kita lihat contoh kod yang menerangkan rupa lalai lebar lejang objek segi empat tepat yang diskalakan. Memandangkan kami tidak menggunakan sifat strokeUniform, lebar lejang juga akan dipengaruhi oleh penskalaan objek.

<!DOCTYPE html>
Terjemahan bahasa Cina bagi <html>
<kepala>
<!-- Tambah pustaka Fabric JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
Terjemahan bahasa Cina bagi </head>
Terjemahan bahasa Cina bagi <body>
<h2>Kemunculan lalai lebar lejang semasa menskala objek</h2>
<p>Cuba skala objek untuk melihat kelakuan lalai</p>
<canvas id="canvas"></canvas>
Terjemahan bahasa Cina bagi <skrip>
// Mulakan contoh kanvas
var canvas = kain baru.Canvas("kanvas");
Canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);

// Mulakan objek segi empat tepat
var rect = kain baru.Rect({
kiri: 55,
atas: 90,
lebar: 170,
ketinggian: 70,
Terjemahan bahasa Cina untuk fill: "#ccccff", ialah: fill: "#ccccff",
pelapik: 9,
Pukulan: "#483d8b",
lejangLebar: 5,
});

//Tambahkannya pada kanvas
Canvas.add(rect);
</skrip>
Terjemahan bahasa Cina bagi </body>
</html>

Salin selepas log masuk

Contoh

Melalui pukulan Sifat seragam sebagai kunci

Dalam contoh ini , kita lulus harta strokeUniform sebagai kunci dan benar sebagai nilai Oleh itu, sapuan objek tidak lagi bertambah atau berkurang Penskalaan objek akan memastikan bahawa strok sentiasa sepadan dengan saiz piksel dengan tepat Kandungan input ialah: dimasukkan untuk lebar lejang.

<!DOCTYPE html>
Terjemahan bahasa Cina bagi <html>
<kepala>
<!-- Tambah pustaka Fabric JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
Terjemahan bahasa Cina bagi </head>
Terjemahan bahasa Cina bagi <body>
<h2>Lepasi pukulan Sifat seragam sebagai kunci</h2>
<p>Cuba skala objek untuk melihat bahawa strok kekal sebagai lebar seragam</p>
<canvas id="canvas"></canvas>
Terjemahan bahasa Cina bagi <skrip>
// Mulakan contoh kanvas
var canvas = kain baharu.Canvas("kanvas");
Canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);

// Mulakan objek segi empat tepat
var rect = kain baru.Rect({
kiri: 55,
atas: 90,
lebar: 170,
ketinggian: 70,
Terjemahan bahasa Cina untuk fill: "#ccccff", ialah: fill: "#ccccff",
pelapik: 9,
Pukulan: "#483d8b",
lejangLebar: 5,
strokeUniform: benar,
});

//Tambahkannya pada kanvas
Canvas.add(rect);
</skrip>
Terjemahan bahasa Cina bagi </body>
</html>

Salin selepas log masuk

diterjemahkan sebagai:
Atas ialah kandungan terperinci Bagaimana untuk mengekalkan lebar lejang segi empat tepat apabila menskala dengan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!