Rumah > Artikel > hujung hadapan web > Bagaimana untuk mendapatkan ketinggian teks berskala menggunakan FabricJS?

Bagaimana untuk mendapatkan ketinggian teks berskala menggunakan FabricJS?

WBOYke hadapan: 2023-08-23 21:37:081321semak imbas

Dalam tutorial ini, kita akan belajar cara mendapatkan ketinggian zum teks menggunakan FabricJS. Kita boleh memaparkan teks pada kanvas dengan menambahkan contoh fabrik.Teks. Ia bukan sahaja membenarkan kami mengalih, menskala dan menukar saiz teks, tetapi juga menyediakan fungsi lain seperti penjajaran teks, hiasan teks dan ketinggian baris, yang boleh diperolehi melalui ciri textAlign, garis bawah dan lineHeight masing-masing. Kita juga boleh menggunakan kaedah getScaledHeight untuk mencari ketinggian berskala objek.

Tatabahasa

getScaledHeight()

Terjemahan bahasa Cina bagi

Contoh 1

ialah:

Contoh 1

Gunakan kaedah getScaledHeight

Mari kita lihat contoh kod untuk melihat output yang dilog apabila menggunakan kaedah getScaledHeight. Dalam kes ini, ketinggian objek 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 getScaledHeight method</h2>
   <p>You can open console from dev tools and see that the 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 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 getScaledHeight method
      console.log("The scaled height is", text.getScaledHeight());
   </script>
</body>
</html>

Contoh 2

diterjemahkan sebagai:

Contoh 2

Gunakan kaedah getScaledHeight dan lulus harta skalaY

Mari lihat contoh kod untuk melihat output yang dilog apabila kaedah getScaledHeight digunakan bersama dengan sifat skalaY Dalam kes ini, ketinggian skala akhir 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 getScaledHeight method and passing the scaleY property</h2>
   <p>You can open console from dev tools and see that the height value is 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 a text object
      var text = new fabric.Text("Add sampletext here", {
         width: 300,
         fill: "green",
         fontWeight: "bold",
         scaleY: 2,
      });
      
      // Add it to the canvas
      canvas.add(text);
      
      // Using getScaledHeight method
      console.log("The scaled height is", text.getScaledHeight());
   </script>
</body>
</html>

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan ketinggian teks berskala 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 membuat pembolehubah peribadi dalam JavaScript?Artikel seterusnya：Bagaimana untuk membuat pembolehubah peribadi dalam JavaScript?

Artikel berkaitan

Lihat lagi