cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk mendapatkan lebar berskala teks menggunakan FabricJS

Bagaimana untuk mendapatkan lebar berskala teks menggunakan FabricJS

PHPz
PHPzke hadapan
2023-08-25 09:13:02800semak imbas

如何使用 FabricJS 获取文本的缩放宽度

Dalam tutorial ini, kita akan belajar cara mendapatkan lebar berskala 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. Kita juga boleh mencari lebar berskala objek menggunakan kaedah getScaledWidth.

Tatabahasa

getScaledWidth()

Contoh 1

Gunakan kaedah getScaledWidth

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

Contoh 2

Gunakan kaedah getScaledWidth dan lulus harta scaleX

Mari kita lihat contoh kod untuk melihat output dilog apabila kaedah getScaledWidth digunakan bersama dengan sifat scaleY. Dalam kes ini, lebar berskala 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 getScaledWidth method and passing the scaleX property</h2>
   <p>You can open console from dev tools and see that the width 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",
         scaleX: 2,
      });
      
      // Add it to the canvas
      canvas.add(text);

      // Using getScaledWidth method
      console.log("The scaled width is", text.getScaledWidth());
   </script>
</body>
</html>

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan lebar berskala teks 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 meluruskan objek IText menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk meluruskan objek IText menggunakan FabricJS?

Artikel berkaitan

Lihat lagi