cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk melumpuhkan pemilihan objek dengan menyeret dalam kanvas menggunakan FabricJS?

Bagaimana untuk melumpuhkan pemilihan objek dengan menyeret dalam kanvas menggunakan FabricJS?

PHPz
PHPzke hadapan
2023-09-13 23:09:081067semak imbas

如何使用 FabricJS 通过在画布中拖动来禁用对象选择？

Dalam artikel ini, kami akan menerangkan cara untuk melumpuhkan pemilihan objek dengan menyeret dalam FabricJS. Dalam kanvas FabricJS pada dasarnya kita boleh mengklik di mana-mana dan memilih kawasan dan mana-mana objek di kawasan itu akan dipilih. Dalam artikel ini, kita akan belajar cara untuk melumpuhkan tingkah laku ini #

Element

- Parameter ini ialah elemen

    itu sendiri, anda boleh menggunakan # 🎜🎜#document.getElementById()
  • atau # 🎜🎜#

    Berasal daripada id elemen itu sendiri. Kanvas FabricJS akan dimulakan pada elemen ini em>Pilihan (pilihan) #🎜🎜🎜 # - Parameter ini adalah a Objek yang menyediakan penyesuaian tambahan kanvas kami. Menggunakan parameter ini, anda boleh menukar sifat seperti warna, kursor, lebar jidar dan banyak sifat lain yang berkaitan dengan kanvas. Parameter pemilihan menunjukkan sama ada pemilihan harus didayakan. Nilai lalai untuk kunci ini ialah True.

    • Contoh 1

  • Mari kita lihat dahulu cara memilih dengan menyeret berfungsi sama seperti apabila ia didayakan. Dalam contoh ini, kami menghantar kekunci pilihan sebagai True, yang juga merupakan nilai lalai. Mari lihat bagaimana kanvas bertindak dengan pemilihan didayakan. 

    new fabric.Canvas(element: HTMLElement|String, {selection: boolean}: Object)
    Contoh 2Kunci pilihan menentukan sama ada untuk mendayakan atau melumpuhkan pemilihan objek dalam kanvas dengan menyeret. Jika kita menetapkan kunci ini kepada

    False
    • , maka kita tidak lagi dapat memilih objek dengan menyeret. 
<!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 selection of objects on a canvas</h2>
   <p>Here you can select the object as the selection key is True</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         selection: true
      });
      // Creating an instance of the fabric.Circle class
      var cir = new fabric.Circle({
         radius: 40,
         fill: "#87a96b",
         left: 30,
         top: 20,
      });
      // Adding it to the canvas
      canvas.add(cir);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Sekarang kita telah menetapkan pilihan kepada Palsu, kita tidak boleh lagi memilih bahagian di sekeliling objek untuk menyeretnya. Walau bagaimanapun, kami masih boleh mengklik dan memilih objek secara manual.

Atas ialah kandungan terperinci Bagaimana untuk melumpuhkan pemilihan objek dengan menyeret dalam kanvas menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

对象
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Promise.any() dan async-await dijelaskan dalam JavaScript?Artikel seterusnya：Promise.any() dan async-await dijelaskan dalam JavaScript?

Artikel berkaitan

Lihat lagi