Bagaimana untuk mencari ketinggian kotak teks dalam IText menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk mencari ketinggian kotak teks dalam IText menggunakan FabricJS?

王林

Lepaskan： 2023-09-14 15:17:16

ke hadapan

1410 orang telah melayarinya

如何使用 FabricJS 查找 IText 中的文本框高度？

Dalam tutorial ini, kita akan belajar cara mencari ketinggian kotak teks 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 mengira ketinggian kotak teks menggunakan kaedah calcTextHeight.

Tatabahasa

calcTextHeight()

Salin selepas log masuk

Contoh 1

Guna kaedah calcTextHeight

Mari lihat contoh kod untuk melihat rupa objek IText apabila menggunakan kaedah calcTextHeight. Dalam kes ini, ketinggian teks akan dikembalikan.

<!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 calcTextHeight method</h2>
   <p> You can open console from dev tools and see that the text height value is being displayed in the console </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 calcTextHeight method
      console.log("The text height is: ", itext.calcTextHeight());
   </script>
</body>
</html>

Salin selepas log masuk

Contoh 2

Gunakan kaedah calcTextHeight untuk mengira ketinggian kotak teks yang meningkat

Dalam contoh ini, kami sengaja meningkatkan ketinggian kotak teks dengan menambah baris teks tambahan. Oleh itu, kaedah calcTextHeight mengembalikan ketinggian kotak teks yang meningkat, yang dalam kes ini adalah lebih kurang 97.632.

<!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 calcTextHeight method to calculate increased text box height
   <p> You can open console from dev tools and see that the text height value being displayed in the console has increased </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: 60,
         top: 70,
         fill: "red",
      });

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

      // Using calcTextHeight method
      console.log("The new text height is: ", itext.calcTextHeight());
   </script>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk mencari ketinggian kotak teks dalam IText menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!