Rumah > Artikel > hujung hadapan web > Bagaimana untuk melumpuhkan kebolehpilihan segi empat tepat menggunakan FabricJS?

Bagaimana untuk melumpuhkan kebolehpilihan segi empat tepat menggunakan FabricJS?

PHPzke hadapan: 2023-08-25 09:25:04971semak imbas

Dalam artikel ini, kita akan belajar cara melumpuhkan selektiviti segi empat tepat menggunakan FabricJS. Segi empat tepat adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta segi empat tepat, kita perlu mencipta contoh kelas fabric.Rect dan menambahkannya pada kanvas. Untuk mengubah suai objek, kita perlu memilihnya dalam FabricJS. Walau bagaimanapun, kita boleh mengubah tingkah laku ini dengan menggunakan atribut pilihan.

Syntax

new fabric.Rect{ selectable: Boolean }: Object)

Parameter

Pilihan (pilihan) - Parameter ini ialah objek digunakan untuk menyediakan penyesuaian tambahan pada segi empat tepat. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan banyak sifat lain yang berkaitan dengan sifat boleh dipilih.

Kunci Pilihan

Pilihan - Hartanah ini menerima Nilai Boolean. Apabila ia diberikan "palsu", objek tidak boleh dipilih untuk pengubahsuaian. Nilai lalainya adalah benar.

Contoh 1

Tingkah laku lalai atau apabila sifat pilihan ditetapkan kepada "Benar"

Mari kita lihat contoh kod untuk memahami cara objek berkelakuan apabila sifat pilihan ditetapkan kepada Benar secara lalai . Apabila sifat Selective ditetapkan kepada Benar, kita boleh memilih objek, menggerakkannya 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>Default behaviour; selectable property is set to True</h2>
   <p>You can try moving the rectangle around the canvas or scaling it to prove
that it&#39;s selectable.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 105,
         top: 70,
         width: 170,
         height: 70,
         fill: "#dcdcdc",
         stroke: "#696969",
         strokeWidth: 5,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Contoh 2

Melepasi atribut boleh pilih sebagai kunci

Dalam contoh ini, kami menetapkan nilai atribut boleh dipilih kepada Palsu. Ini bermakna kita tidak lagi boleh memilih objek segi empat tepat untuk pengubahsuaian.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk melumpuhkan kebolehpilihan segi empat tepat 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 mendapatkan lebar berskala teks menggunakan FabricJSArtikel seterusnya：Bagaimana untuk mendapatkan lebar berskala teks menggunakan FabricJS

Artikel berkaitan

Lihat lagi