Bagaimana untuk melumpuhkan selektiviti IText menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk melumpuhkan selektiviti IText menggunakan FabricJS?

王林

Lepaskan： 2023-08-24 20:13:02

ke hadapan

1315 orang telah melayarinya

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

Dalam tutorial ini, kita akan belajar cara melumpuhkan selektiviti IText menggunakan FabricJS. Kelas IText telah diperkenalkan dalam FabricJS versi 1.4, yang memanjangkan Fabric.Text dan digunakan untuk mencipta kejadian IText. Kejadian IText memberi kita kebebasan untuk memilih, memotong, menampal atau menambah teks baharu tanpa konfigurasi tambahan. Terdapat juga pelbagai kombinasi kekunci yang disokong dan kombinasi tetikus/sentuh untuk menjadikan teks interaktif yang tidak tersedia dalam Teks.

Walau bagaimanapun, Textbox berdasarkan IText membolehkan kami mengubah saiz segi empat tepat teks dan membalutnya secara automatik. Ini tidak berlaku untuk IText, kerana ketinggian tidak melaras berdasarkan pemisah baris. Kita boleh memanipulasi objek IText dengan menggunakan pelbagai sifat. Untuk mengubah suai objek, kita perlu memilihnya dalam FabricJS. Walau bagaimanapun, kita boleh mengubah tingkah laku ini dengan menggunakan atribut boleh dipilih.

Tatabahasa

new fabric.IText(text: String, { selectable: Boolean }: Object)

Salin selepas log masuk

Parameter

text - Parameter ini menerima String iaitu rentetan teks yang ingin kami paparkan dalam objek IText.
Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan kepada objek kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan banyak sifat lain yang dikaitkan dengan objek yang sifatnya boleh dipilih.

Kunci pilihan

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

Contoh 1

Apabila gelagat lalai atau atribut pilihan ditetapkan kepada "benar"

Mari lihat contoh kod untuk memahami cara objek berkelakuan apabila sifat boleh pilih ditetapkan kepada benar secara lalai. 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 ‘true’</h2>
   <p>You can try moving the itext object around the canvas or scaling it to prove that it'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 an itext object
      var itext = new fabric.IText(
         "Add sample text here.Lorem ipsum dolor sit amet",{
            width: 300,
            left: 50,
            top: 70,
            fill: "#6ae18b",
         }
      );

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

Salin selepas log masuk

Contoh 2

Lepaskan atribut pilihan sebagai kunci dengan nilai "palsu"

Dalam contoh ini, kami memberikan nilai palsu kepada atribut pilihan. Ini bermakna kita tidak lagi boleh memilih objek IText 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 with “false” value</h2>
   <p>You can see that the itext object 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 an itext object
      var itext = new fabric.IText(
         "Add sample text here.Lorem ipsum dolor sit amet",{
            width: 300,
            left: 50,
            top: 70,
            fill: "#6ae18b",
            selectable: false,
         }
      );

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

Salin selepas log masuk

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