Bagaimana untuk membuat bulatan tidak kelihatan menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk membuat bulatan tidak kelihatan menggunakan FabricJS?

WBOY

Lepaskan： 2023-08-26 22:49:11

ke hadapan

720 orang telah melayarinya

Bagaimana untuk membuat bulatan tidak kelihatan menggunakan FabricJS?

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)

Salin selepas log masuk

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>

Salin selepas log masuk

Contoh 2

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!