hujung hadapan web
tutorial js
Bagaimana untuk mengekalkan lebar lejang segi empat tepat apabila menskala dengan FabricJS?
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)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
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
strokeUniform< strong>− Sifat ini menerima Nilai Boolean, membolehkan kami menentukan sama ada lebar lejang berskala dengan objek. Nilai lalainya adalah palsu.
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 id="Kemunculan-lalai-lebar-lejang-semasa-menskala-objek">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>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 id="Lepasi-pukulan-Sifat-seragam-sebagai-kunci">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>