Rumah >hujung hadapan web >tutorial js >Bagaimana untuk melumpuhkan interaktiviti kanvas menggunakan FabricJS?

Bagaimana untuk melumpuhkan interaktiviti kanvas menggunakan FabricJS?

WBOYke hadapan: 2023-09-02 15:33:131529semak imbas

如何使用 FabricJS 禁用画布的交互性？

Dalam artikel ini, kita akan belajar cara melumpuhkan interaktiviti kanvas dalam FabricJS. Lapisan interaksi di atas setiap objek adalah salah satu ciri unik FabricJS. Sebaik sahaja kita memulakan kanvas, kita boleh memilih objek, menyeretnya atau memanipulasi pilihan kumpulan. Walau bagaimanapun, semua ini boleh dibuat asal dengan menyatakan sifat interaksi sebagai Palsu.

Sintaks

new fabric.Canvas(element: HTMLElement|String, { interactive : Boolean }: Object)

Parameter

#🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜 🎜# - Parameter ini ialah elemen itu sendiri, yang boleh diperoleh daripada id elemen itu sendiri menggunakan document.getElementById() atau #🎜 🎜#. Kanvas FabricJS akan dimulakan pada elemen ini.
Pilihan (pilihan)
- Parameter ini ialah objek yang menyediakan akses kepada kanvas kami Buat tambahan penyesuaian. Menggunakan parameter ini, adalah mungkin untuk menukar sifat yang berkaitan dengan kanvas seperti warna, kursor, lebar sempadan dan banyak sifat lain, antaranya Interaktif ialah sifat yang membolehkan kita memutuskan sama ada kita mahukan kanvas interaktif atau tidak. Nilai lalai sifat ini ialah Benar.
Contoh 1

#🎜🎜🎜🎜🎜🎜🎜🎜🎜 interaktiviti , kita boleh menyeret objek secara bebas, memilihnya dan memanipulasinya mengikut keperluan. Kita boleh lihat dalam contoh kod di bawah -

<!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 interactivity of canvas</h2>
   <p>Here you can drag the object and manipulate them freely as we have set the <b>interactive</b> property to True. </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         interactive: true,
      });
      // Creating an instance of the fabric.Rect class
      var obj1 = new fabric.Rect({
         left: 170,
         top: 90,
         width: 60,
         height: 80,
         fill: "#966fd6",
         angle: 90,
      });
      var obj2 = new fabric.Rect({
         left: 200,
         top: 120,
         width: 60,
         height: 80,
         fill: "#ffa343",
         angle: 56,
      });
      // Adding it to the canvas
      canvas.add(obj1);
      canvas.add(obj2);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Contoh 2

Meluluskan kunci interaksi ke kelas

#🎜 lihat contoh kod untuk melihat cara melumpuhkan interaktiviti kanvas. Kita boleh menetapkan nilai Palsu pada sifat interaksi, yang akan menghapuskan lapisan interaksi di atas objek dalam kanvas.

<!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 interactivity of canvas</h2>
   <p>Here you cannot select an area around the objects and manipulate them freely, as we have set the <b>interactive</b> property as False. </b>
   </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         interactive: false,
      });
      // Creating an instance of the fabric.Rect class
      var obj1 = new fabric.Rect({
         left: 170,
         top: 90,
         width: 60,
         height: 80,
         fill: "#966fd6",
         angle: 90,
      });
      var obj2 = new fabric.Rect({
         left: 200,
         top: 120,
         width: 60,
         height: 80,
         fill: "#ffa343",
         angle: 56,
      });
      // Adding it to the canvas
      canvas.add(obj1);
      canvas.add(obj2);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Atas ialah kandungan terperinci Bagaimana untuk melumpuhkan interaktiviti 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：Bagaimana untuk menyemak sama ada objek wujud dalam JavaScript?Artikel seterusnya：Bagaimana untuk menyemak sama ada objek wujud dalam JavaScript?

Artikel berkaitan

Lihat lagi