Bagaimana untuk menetapkan sudut kecondongan segitiga pada paksi-x menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menetapkan sudut kecondongan segitiga pada paksi-x menggunakan FabricJS?

WBOY

Lepaskan： 2023-09-05 22:37:12

ke hadapan

818 orang telah melayarinya

Bagaimana untuk menetapkan sudut kecondongan segitiga pada paksi-x menggunakan FabricJS?

Dalam tutorial ini, kita akan belajar cara menetapkan sudut kecondongan pada paksi-x segitiga menggunakan FabricJS. Segitiga adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta segi tiga, kita perlu mencipta contoh kelas fabric.Triangle

Kami boleh menyesuaikan objek segi tiga kami dengan menukar saiznya, menambah warna latar belakang atau menukar sudut kecondongan pada paksi-x. Kita boleh mencapai ini menggunakan atribut skewX

Sintaks

fabrik baharu.Triangle({ skewX: Number }: Object ) </pra><h2>Parameter</h2><ul class="list"><li><p><strong>Pilihan</strong><strong> ;/strong> − Parameter ini ialah <em>objek</em> Menggunakan parameter ini, anda boleh menukar warna objek, kursor, lebar lejang dan banyak sifat lain yang berkaitan dengan sifat <em>skewX</em> </p></li></ul><h2>Kunci Pilihan</h2><ul class="list"><li><p><strong>skewX< kuat> − Sifat ini menerima nilai <strong>nombor</strong> </p></li></ul><h2>Contoh 1</h2><p><strong>Apabila atribut skewX tidak digunakan</strong></p> ;p> Mari lihat contoh kod untuk melihat rupa objek segi tiga apabila sifat skewX tidak digunakan. Dalam kes ini, objek segi tiga kami tidak akan dicondongkan pada sebarang sudut. </p><pre class="demo-code notranslate language-javascript" data-lang="javascript"><!DOCTYPE html>
Terjemahan bahasa Cina bagi <html>
Terjemahan bahasa Cina bagi <head>
<!-- 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>Apabila atribut skewX tidak digunakan</h2>
<p>Secara lalai, anda boleh melihat bahawa segi tiga tidak condong pada sebarang sudut</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 tiga
var segitiga = kain baru.Segitiga({

kiri: 120,
atas: 70,
lebar: 90,
Tinggi: 80,
isi: "#b7410e",
Pukulan: "#f5deb3",

(Nota: Ini ialah sekeping kod HTML, yang mewakili ruang)
lejangLebar: 7,
});

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

Salin selepas log masuk

Contoh 2

Letakkan skewX sebagai kunci dan tetapkan nilai tersuai.

Dalam contoh ini, kita akan melihat cara untuk menetapkan nilai berangka pada sifat skewX Nilai yang dilalui akan menentukan tahap kecondongan di sepanjang paksi X.

<!DOCTYPE html>
Terjemahan bahasa Cina bagi <html>
Terjemahan bahasa Cina bagi <head>
<!-- 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>Melalukan skewX sebagai kunci dan memberikannya nilai tersuai</h2>
<p>Anda boleh melihat segi tiga telah condong pada paksi-x pada sudut 50 darjah</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 tiga
var segitiga = kain baru.Segitiga({

kiri: 120,
atas: 70,
lebar: 90,
Tinggi: 80,
isi: "#b7410e",
Pukulan: "#f5deb3",

(Nota: Ini ialah sekeping kod HTML, yang mewakili ruang)
lejangLebar: 7,
skewX: 50,
});

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

Salin selepas log masuk

ialah:

Atas ialah kandungan terperinci Bagaimana untuk menetapkan sudut kecondongan segitiga pada paksi-x menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!