Rumah
hujung hadapan web
tutorial js
Bagaimana untuk menetapkan sudut kecondongan segitiga pada paksi-x menggunakan FabricJS?
hujung hadapan web
tutorial js
Bagaimana untuk menetapkan sudut kecondongan segitiga pada paksi-x menggunakan FabricJS?
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 id="Parameter">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 id="Kunci-Pilihan">Kunci Pilihan</h2><ul class="list"><li><p><strong>skewX< kuat> − Sifat ini menerima nilai <strong>nombor</strong> </p></li></ul><h2 id="Contoh">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 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 id="Apabila-atribut-skewX-tidak-digunakan">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 id="Melalukan-skewX-sebagai-kunci-dan-memberikannya-nilai-tersuai">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