Rumah > Artikel > hujung hadapan web > Bagaimana untuk mengira ketinggian watak pada kedudukan tertentu dalam teks menggunakan FabricJS?

Bagaimana untuk mengira ketinggian watak pada kedudukan tertentu dalam teks menggunakan FabricJS?

WBOYke hadapan: 2023-08-25 08:29:02527semak imbas

如何使用 FabricJS 计算文本中给定位置的字符高度？

Dalam tutorial ini, kita akan belajar cara mengira ketinggian garisan pada indeks baris yang dikehendaki dalam teks menggunakan FabricJS. Kita boleh memaparkan teks pada kanvas dengan menambahkan contoh Fabric.Text. Ia bukan sahaja membenarkan kami mengalih, menskala dan menukar dimensi teks, tetapi ia juga menyediakan ciri tambahan seperti penjajaran teks, hiasan teks, ketinggian baris, yang tersedia melalui ciri textAlign, garis bawah dan lineHeight masing-masing. Kami juga boleh mengira ketinggian baris pada indeks baris yang dikehendaki menggunakan kaedah getHeightOfLine.

Tatabahasa

getHeightOfLine(lineIndex: Number)

Parameter

lineIndex - Parameter ini menerima Number sebagai nilai. Nilai yang diberikan menentukan indeks garisan yang ketinggiannya ingin kita kira.

Contoh 1

Gunakan kaedah getHeightOfLine

Mari kita lihat contoh kod untuk melihat output yang dilog apabila menggunakan kaedah getHeightOfLine. Dalam kes ini, ketinggian baris pada indeks baris 1 akan dipaparkan dalam konsol.

<!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 getHeightOfLine method</h2>
   <p>You can open console from dev tools and see that the height of line 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 a text object
      var text = new fabric.Text("Add sampletext here", {
         width: 300,
         fill: "green",
         fontWeight: "bold",
      });

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

      // Using getHeightOfLine method
      console.log("The height of line is", text.getHeightOfLine(1));
   </script>
</body>
</html>

Contoh 2

Gunakan kaedah getHeightOfLine dan hantar saiz fon yang berbeza

Mari kita lihat contoh kod untuk melihat output yang dilog apabila menggunakan kaedah getHeightOfLine dengan saiz fon yang berbeza 30. Dalam kes ini, ketinggian baris pada indeks baris 0 akan dipaparkan dengan saiz fon yang diberikan.

<!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 getHeightOfLine method and passing a different font size</h2>
   <p>You can open console from dev tools and see that the height of line 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 a text object
      var text = new fabric.Text("Add sampletext here", {
         width: 300,
         fill: "green",
         fontWeight: "bold",
         fontSize: 30
      });

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

      // Using getHeightOfLine method
      console.log("The height of line is", text.getHeightOfLine(0));
   </script>
</body>
</html>

Atas ialah kandungan terperinci Bagaimana untuk mengira ketinggian watak pada kedudukan tertentu dalam teks menggunakan FabricJS?. 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 menulis kod fungsi Memoization mudah dalam JavaScript?Artikel seterusnya：Bagaimana untuk menulis kod fungsi Memoization mudah dalam JavaScript?

Artikel berkaitan

Lihat lagi