Rumah >hujung hadapan web >tutorial js >Bagaimana untuk menetapkan kedudukan segitiga dari atas menggunakan FabricJS?
Bagaimana untuk menetapkan kedudukan segitiga dari atas menggunakan FabricJS?
- WBOYke hadapan
- 2023-09-17 16:25:02920semak imbas
Dalam tutorial ini, kami akan menetapkan kedudukan segi tiga menggunakan FabricJS. Sifat top membolehkan kita memanipulasi kedudukan objek. Secara lalai, kedudukan teratas adalah relatif kepada bahagian atas objek.
Syntax
Fabric.Triangle baharu({ atas: Nombor }: Objek)< /pra><h2>Parameter</h2><ul class="list"><li><p><strong> ;/strong><strong> (pilihan)</strongphpcngtphp cn - Parameter ini ialah <em>Objek</em> Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan sifat lain yang berkaitan dengan objek dengan <em>atas</em> </p></li></ul><h2>Kekunci Pilihan</h2phpcngt phpcn<ul Class= list"><li><p><strong>atas</strong - Sifat ini menerima <strong>Nombor</strong> yang membolehkan kami menetapkan jarak segi tiga dari atas kanvas </p></li></ul><h2>Contoh 1</h2> <p><strong>Penampilan Lalai Objek Segitiga</strong></p><p>Mari kita lihat contoh kod untuk melihat bagaimana objek segi tiga kita muncul apabila sifat teratas bukan digunakan. </ p><pre class="demo-code notranslate language-javascript" data-lang="javascript"><!DOCTYPE html>
<html>
<kepala>
<!--Tambah perpustakaan JS Fabric-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<badan>
<h2> Penampilan lalai objek segi tiga</h2>
<p> Penampilan lalai segi tiga boleh dilihat apabila atribut <b>atas</b> </p>
<canvas id="canvas"></canvas>
<skrip>
//Mulakan contoh kanvas
var canvas = new Fabric.Canvas("kanvas");
canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);
//Memulakan objek segi tiga
var segitiga = Fabric.Triangle baharu({
Kiri: 105,
Lebar: 90,
Tinggi: 80,
Isikan: "#ffc1cc",
Strok: "#fbaed2",
Lebar lejang: 5,
});
//Tambahkannya pada kanvas
canvas.add(segitiga);
</skrip>
</badan>
</html>Contoh 2
Melalukan atribut atas sebagai kunci menggunakan nilai tersuai<./strongphpcngt; phpcn
Dalam contoh ini, kami menghantar atribut atas Ini bermakna objek segi tiga kita akan diletakkan 70px dari atas.
<!DOCTYPE html>
<html>
<kepala>
<!--Tambah perpustakaan JS Fabric-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<badan>
<h2>Lepasi atribut teratas sebagai kunci dengan nilai tersuai</h2>
<p>Anda boleh melihat bahawa objek segi tiga diletakkan 70px dari atas</p>
<canvas id="canvas"></canvas>
<skrip>
//Mulakan contoh kanvas
var canvas = new Fabric.Canvas("kanvas");
canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);
//Memulakan objek segi tiga
var segitiga = Fabric.Triangle baharu({
Kiri: 105,
Atas: 70,
Lebar: 90,
Tinggi: 80,
Isikan: "#ffc1cc",
Strok: "#fbaed2",
Lebar lejang: 5,
});
//Tambahkannya pada kanvas
canvas.add(segitiga);
</skrip>
</badan>
</html>Atas ialah kandungan terperinci Bagaimana untuk menetapkan kedudukan segitiga dari atas menggunakan 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：Program JavaScript untuk mengira kekerapan nombor genap dan ganjil dalam matriksArtikel seterusnya：Program JavaScript untuk mengira kekerapan nombor genap dan ganjil dalam matriks
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional