Rumah > Artikel > hujung hadapan web > Bagaimana untuk menggunakan FabricJS untuk memasuki keadaan penyuntingan menggunakan fungsi dalam IText?

Bagaimana untuk menggunakan FabricJS untuk memasuki keadaan penyuntingan menggunakan fungsi dalam IText?

王林ke hadapan: 2023-08-28 12:01:17933semak imbas

Dalam tutorial ini, kita akan belajar cara memasuki keadaan penyuntingan menggunakan ciri IText dalam 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 berasaskan 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. Begitu juga, kita boleh menggunakan kaedah enterEditing untuk memasuki keadaan penyuntingan.

tatabahasa

enterEditing(): fabric.IText

Contoh 1

Jangan gunakan kaedah enterEditing

Mari kita lihat contoh kod untuk melihat rupa objek IText tanpa menggunakan kaedah EnterEditing.

<!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>Without using the enterEditing method</h2>
   <p>You can see that the editing mode is off</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.", {
         width: 300,
         left: 60,
         top: 70,
         fill: "red",
      });

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

Contoh 2

Gunakan kaedah enterEditing

Mari kita lihat contoh kod untuk melihat rupa objek IText apabila memasuki keadaan penyuntingan menggunakan kaedah enterEditing. Dalam kes ini, objek itext kami kini akan berada dalam mod edit kerana kursor berada di sana.

<!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>Without using the enterEditing method</h2>
   <p>You can see that the editing mode is on</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.", {
         width: 300,
         left: 60,
         top: 70,
         fill: "red",
      });

      // Add it to the canvas
      canvas.add(itext);

      // Using enterEditing method
      itext.enterEditing();
   </script>
</body>
</html>

Atas ialah kandungan terperinci Bagaimana untuk menggunakan FabricJS untuk memasuki keadaan penyuntingan menggunakan fungsi dalam IText?. 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 menukar senarai elemen dalam tatasusunan menggunakan jQuery?Artikel seterusnya：Bagaimana untuk menukar senarai elemen dalam tatasusunan menggunakan jQuery?

Artikel berkaitan

Lihat lagi