Bagaimana untuk menetapkan kedudukan segitiga dari atas menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menetapkan kedudukan segitiga dari atas menggunakan FabricJS?

WBOY

Lepaskan： 2023-09-17 16:25:02

ke hadapan

947 orang telah melayarinya

如何使用 FabricJS 设置三角形从顶部的位置？

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!