Bagaimana untuk melumpuhkan pemilihan objek dengan menyeret dalam kanvas menggunakan FabricJS?-tutorial js-php.cn

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

PHPz

Lepaskan： 2023-09-13 23:09:08

ke hadapan

951 orang telah melayarinya

如何使用 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

atau # 🎜🎜#
Berasal daripada id elemen itu sendiri. Kanvas FabricJS akan dimulakan pada elemen ini
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)
```
Salin selepas log masuk
Contoh 2Kunci pilihan menentukan sama ada untuk mendayakan atau melumpuhkan pemilihan objek dalam kanvas dengan menyeret. Jika kita menetapkan kunci ini kepada
False

<!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>

Salin selepas log masuk

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!