Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuat bulatan tidak kelihatan menggunakan FabricJS?

Bagaimana untuk membuat bulatan tidak kelihatan menggunakan FabricJS?

WBOYke hadapan: 2023-08-26 22:49:11721semak imbas

Dalam tutorial ini, kita akan belajar cara membuat bulatan tidak kelihatan menggunakan FabricJS. Bulatan adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta bulatan, kita mesti mencipta contoh kelas fabric.Circle dan menambahkannya pada kanvas. Objek bulatan kami boleh disesuaikan dalam pelbagai cara, seperti menukar saiznya, menambah warna latar belakang atau menjadikannya kelihatan atau tidak kelihatan. Kita boleh mencapai ini dengan menggunakan atribut visible.

Syntax

new fabric.Circle( { visible: Boolean }: Object)

Parameter

pilihan (pilihan) - Parameter ini ialah objek yang menyediakan pilihan untuk penyesuaian tambahan bagi kalangan kami. Menggunakan parameter ini, anda boleh menukar sifat yang berkaitan dengan objek ini seperti warna, kursor, lebar lejang dan banyak sifat lain, yang mana boleh dilihat ialah sifat.

Option key

visible - Hartanah ini menerima nilai boolean yang membolehkan kami memaparkan objek pada kanvas. Nilai lalainya ialah Benar. . Dengan menyatakan nilai sebagai 'benar', kami memastikan objek bulatan kami dipaparkan pada kanvas. Ini juga merupakan tingkah laku lalai FabricJS.

<!DOCTYPE html>
<html>
   <head>
      <!-- Adding the Fabric JS Library-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
   </head>

   <body>
      <h2>Making a circle invisible using FabricJS</h2>
      <p>Here, the circle is visible because we have set <b>visible</b> to True. This is the default behavior. So, even if we don&#39;t apply the <b>visible</b> property, it will be set to True, by defalt. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "#adff2f",
            radius: 50,
            stroke: "#228b22",
            visible: true
         });

         // Adding it to the canvas
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Melepasi harta boleh dilihat sebagai kunci dan menetapkannya kepada nilai 'palsu'

Dalam contoh ini, kita menghantar sifat boleh dilihat sebagai kunci dan menetapkannya kepada nilai Palsu. Menetapkan ini kepada nilai palsu akan memastikan objek bulatan kami tidak dipaparkan pada kanvas. Ia bukan sahaja menjadikan objek 'tidak kelihatan', ia menyingkirkannya sepenuhnya. Ia boleh digunakan untuk mengalih keluar objek daripada kanvas tanpa memadamkan kodnya.

rreeee

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

对象 fabric

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Cari masa berlalu dalam JavaScriptArtikel seterusnya：Cari masa berlalu dalam JavaScript

Artikel berkaitan

Lihat lagi