cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk melumpuhkan selektiviti Bulatan menggunakan FabricJS?

Bagaimana untuk melumpuhkan selektiviti Bulatan menggunakan FabricJS?

WBOY
WBOYke hadapan
2023-09-01 19:41:02862semak imbas

如何使用 FabricJS 禁用 Circle 的选择性？

Dalam tutorial ini, kita akan belajar cara untuk melumpuhkan selektiviti bulatan menggunakan FabricJS. Bulatan adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk membuat bulatan, kita mesti mencipta contoh kelas Fabric.Circle dan menambahkannya pada kanvas. Untuk mengubah suai objek, kita perlu memilihnya dalam FabricJS. Walau bagaimanapun, kita boleh mengubah tingkah laku ini dengan menggunakan atribut selectable.

Syntax

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

Parameter

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

    Kunci pilihan
    • ul>

    • 🎜🎜 #🎜#Pilihan # - Hartanah ini menerima nilai

      boolean . Apabila ia diberikan nilai "palsu", objek tidak boleh dipilih untuk pengubahsuaian. Nilai lalainya ialah True. Contoh 1

      • Tingkah laku lalai atau
    Atribut pilihan #"# tetapkan kepada "true 🎜🎜 🎜#

    Mari kita lihat contoh untuk memahami cara objek berkelakuan apabila sifat boleh pilih ditetapkan kepada Benar secara lalai. Apabila sifat boleh pilih ditetapkan kepada benar, kita boleh memilih objek, mengalihkannya di sekeliling kanvas dan mengubah suainya. 

    <!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>Disabling the selectability of circle using FabricJs</h2>
      <p>Here you can select the object (circle) and move it around freely. This is the default behavior. Here we have not used the <b>selectable</b> property but by default, it is set to True. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            radius: 50,
            fill: "#85bb65"
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>
    Contoh 2Pass atribut boleh dipilih sebagai kunci

    #🎜🎜 ##Dalam contoh ini, kita 🎜 boleh dipilih

    Harta. Ini bermakna kita tidak lagi boleh memilih objek bulat untuk pengubahsuaian. 

    <!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>Disabling the selectability of circle using FabricJs</h2>
      <p>Now you can no longer select the circle because we have set <b>selectable</b> as False. </p>
      <canvas id="canvas"></canvas>
   
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            radius: 50,
            fill: "#85bb65",
            selectable: false
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Atas ialah kandungan terperinci Bagaimana untuk melumpuhkan selektiviti Bulatan 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：Bagaimana untuk menggabungkan literal ungkapan biasa dalam JavaScript?Artikel seterusnya：Bagaimana untuk menggabungkan literal ungkapan biasa dalam JavaScript?

Artikel berkaitan

Lihat lagi