newfabric.Rect({strokeUniform:Boolean}:Objec"/> newfabric.Rect({strokeUniform:Boolean}:Objec">
cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk mengekalkan lebar lejang segi empat tepat apabila menskala dengan FabricJS?

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

WBOY
WBOYke hadapan
2023-08-23 08:57:291081semak imbas

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− 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>

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>
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!

Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk mendapatkan rentetan antara pendakap kerinting menggunakan ungkapan biasa JavaScript?Artikel seterusnya：Bagaimana untuk mendapatkan rentetan antara pendakap kerinting menggunakan ungkapan biasa JavaScript?

Artikel berkaitan

Lihat lagi