Bagaimana untuk melumpuhkan kebolehpilihan segi empat tepat menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk melumpuhkan kebolehpilihan segi empat tepat menggunakan FabricJS?

PHPz

Lepaskan： 2023-08-25 09:25:04

ke hadapan

1034 orang telah melayarinya

Bagaimana untuk melumpuhkan kebolehpilihan segi empat tepat menggunakan FabricJS?

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)

Salin selepas log masuk

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>

Salin selepas log masuk

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!