Rumah > Artikel > hujung hadapan web > Bagaimana untuk keluar dari keadaan penyuntingan dalam IText menggunakan FabricJS?

Bagaimana untuk keluar dari keadaan penyuntingan dalam IText menggunakan FabricJS?

PHPzke hadapan: 2023-09-07 14:29:101128semak imbas

Dalam tutorial ini, kita akan belajar cara keluar dari keadaan penyuntingan dalam 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.

Namun, 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. Begitu juga, kita boleh menggunakan kaedah exitEditing untuk keluar dari keadaan penyuntingan.

Tatabahasa

exitEditing(): Itext.IText

Contoh 1

Hanya gunakan atribut isEditing

Mari kita lihat contoh kod untuk melihat rupa objek IText apabila menggunakan sifat isEditing sahaja dan menghantar nilai sebenar untuk menghidupkan mod pengeditan. Memandangkan kami tidak menggunakan kaedah exitEditing(), objek IText kami akan berada dalam mod penyuntingan.

<!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>Using the isEditing property only</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",
         isEditing: true,
      });

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

Contoh 2

Gunakan kaedah exitEditing dengan atribut isEditing

Mari kita lihat contoh kod untuk melihat rupa objek IText apabila kaedah exitEditing digunakan bersama dengan sifat isEditing. Memandangkan kami memberikan nilai sebenar kepada sifat isEditing, objek IText harus berada dalam mod pengeditan. Walau bagaimanapun, sebaik sahaja kami menggunakan kaedah exitEditing, mod editing akan keluar.

<!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>Using the exitEditing method along with the isEditing property</h2>
   <p>You can see that the editing mode is off even though we have passed the isEditing property a true value</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",
         isEditing: true,
      });

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

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

Atas ialah kandungan terperinci Bagaimana untuk keluar dari keadaan penyuntingan dalam IText menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

对象 fabric

Kenyataan：

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

Artikel sebelumnya：Bagaimana untuk menukar teks dan imej dengan mengklik butang dalam JavaScript?Artikel seterusnya：Bagaimana untuk menukar teks dan imej dengan mengklik butang dalam JavaScript?

Artikel berkaitan

Lihat lagi