cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk membuat segi empat tepat tidak kelihatan menggunakan FabricJS?

Bagaimana untuk membuat segi empat tepat tidak kelihatan menggunakan FabricJS?

PHPz
PHPzke hadapan
2023-09-22 13:01:07894semak imbas

如何使用 FabricJS 使矩形不可见？

Dalam tutorial ini, kita akan belajar cara membuat segi empat tepat tidak kelihatan menggunakan FabricJS. Segi empat tepat adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta segi empat tepat, kita mesti mencipta contoh kelas fabric.Rect dan menambahnya pada kanvas.

pelbagai cara , seperti menukar dimensinya, menambah warna latar belakang atau dengan menjadikannya kelihatan atau tidak kelihatan. Kita boleh melakukan ini dengan menggunakan atribut visible

Sintaks

new Fabric.Rect( {visible: Boolean }: Object)</pra>Parameter< h2><ul class="list"><li><p><strong>Pilihan (pilihan) </strong> - Parameter ini ialah <em>Objek</em> kepada segi empat tepat kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan sifat lain yang berkaitan dengan objek yang sifatnya <em>kelihatan</em>. </p></li></ul><h2>Kekunci pilihan</h2> <ul class="list" ><li><p><strong>boleh dilihat</ strong> - Sifat ini menerima nilai <strong>Boolean </strong> Nilai lalainya ialah<em> benar.</em></p></li></ul><h2>Contoh 1</h2><p><strong>Passble sebagai kunci dengan nilai 'benar'</strong></p><p>Mari lihat contoh kod untuk memahami perkara yang berlaku apabila kita lulus boleh dilihat
Nilai sebenar sesuatu harta. Dengan menyatakan nilai sebagai "Benar" kami memastikan bahawa kami
Objek segi empat tepat dipaparkan pada kanvas. Ini juga merupakan tingkah laku lalai
FabricJS.</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>Luluskan sifat boleh dilihat sebagai kunci dengan nilai 'Benar'</h2>
<p>Anda boleh melihat bahawa objek segi empat tepat telah dipaparkan pada kanvas. </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 empat tepat
var segi empat = kain baru ({.
Kiri: 55,
Atas: 60,
Lebar: 170,
Tinggi: 70,
Isikan: "#f4f0ec",
Pukulan: "#2a52be",
Lebar lejang: 5,
Nampak: nyata,
});

//Tambahkannya pada kanvas
canvas.add(segi empat tepat);
</skrip>
</badan>
</html>

Contoh

Melalukan sifat yang boleh dilihat sebagai kunci menggunakan nilai 'Salah'

< ;p> ;Dalam contoh ini, kami menghantar atribut visible sebagai kunci dengan nilai palsu. Menentukan nilai palsu akan memastikan objek segi empat tepat kami tidak dipaparkan ke kanvas. Ia hanya tidak menjadikan objek "tidak kelihatan" tetapi menyingkirkannya sepenuhnya. Ia boleh digunakan untuk mengalih keluar objek daripada kanvas tanpa memadamkan kodnya. 

<!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 sifat boleh dilihat sebagai kunci dengan nilai 'Salah'</h2>
<p>Anda boleh melihat bahawa objek segi empat tepat belum diberikan kepada kanvas. </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 empat tepat
var segi empat = kain baru ({.
Kiri: 55,
Atas: 60,
Lebar: 170,
Tinggi: 70,
Isikan: "#f4f0ec",
Pukulan: "#2a52be",
Lebar lejang: 5,
Nampak: palsu,
});

//Tambahkannya pada kanvas
canvas.add(segi empat tepat);
</skrip>
</badan>
</html>

Atas ialah kandungan terperinci Bagaimana untuk membuat segi empat tepat tidak kelihatan menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript ajax html Boolean Object class var JS 对象 canvas ul li https fabric
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Untuk apa sessionstorage digunakan?Artikel seterusnya：Untuk apa sessionstorage digunakan?

Artikel berkaitan

Lihat lagi