Rumah > Artikel > hujung hadapan web > Bagaimana untuk melumpuhkan selektiviti Triangle menggunakan FabricJS?

Bagaimana untuk melumpuhkan selektiviti Triangle menggunakan FabricJS?

王林ke hadapan: 2023-09-08 17:13:021131semak imbas

如何使用 FabricJS 禁用 Triangle 的选择性？

Dalam tutorial ini, kita akan belajar cara untuk melumpuhkan selektiviti segi tiga menggunakan FabricJS. Segitiga adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta segi tiga, kita mesti mencipta contoh kelas Fabric.Triangle dan menambahkannya pada kanvas.

Untuk mengubah suai objek, kita perlu memilihnya dalam FabricJS. Walau bagaimanapun, kita boleh melumpuhkan tingkah laku ini dengan menggunakan atribut selectable.

Syntax

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

Parameter

#🎜Parameter#🎜#🎜#🎜#Pilihan Pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada segi tiga kami. Menggunakan parameter ini, anda boleh menukar sifat objek yang berkaitan dengan sifat
selectable

pilihan #🎜🎜 diterima🎜🎜 #Boolean nilai. Apabila ia diberikan nilai "palsu", objek tidak boleh dipilih untuk pengubahsuaian. Nilai lalainya adalah benar.

Contoh 1

Apabila tingkah laku lalai atau atribut pilihan ditetapkan kepada "benar" #🎜🎜🎜🎜🎜##🎜 # Mari lihat contoh kod untuk memahami cara objek bertindak secara lalai apabila sifat boleh dipilih

ditetapkan kepada Benar. Apabila sifat boleh pilih ditetapkan kepada Benar, kita boleh memilih objek, mengalihkannya 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 or when selectable property is set to &#39;true&#39;</h2>
   <p>You can try moving the triangle 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 triangle object
      var triangle = new fabric.Triangle({
         left: 105,
         top: 70,
         width: 90,
         height: 80,
         fill: "#746cc0",
         stroke: "#967bb6",
         strokeWidth: 5,
      });

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

#🎜🎜🎜#Dalam contoh ini kepada atribut yang dipilih. Ini bermakna kita tidak lagi boleh memilih objek segi tiga untuk pengubahsuaian.

<!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>Passing selectable property as key</h2>
   <p>You can see that the triangle is no longer 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 triangle object
      var triangle = new fabric.Triangle({
         left: 105,
         top: 70,
         width: 90,
         height: 80,
         fill: "#746cc0",
         stroke: "#967bb6",
         strokeWidth: 5,
         selectable: false,
      });

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

Atas ialah kandungan terperinci Bagaimana untuk melumpuhkan selektiviti Triangle menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

对象 ul fabric

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk melakukan pengiraan perkataan pada kawasan teks menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk melakukan pengiraan perkataan pada kawasan teks menggunakan JavaScript?

Artikel berkaitan

Lihat lagi