Bagaimana untuk mendapatkan ketinggian teks berskala menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk mendapatkan ketinggian teks berskala menggunakan FabricJS?

WBOY

Lepaskan： 2023-08-23 21:37:08

ke hadapan

1288 orang telah melayarinya

Bagaimana untuk mendapatkan ketinggian teks berskala menggunakan FabricJS?

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()

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!