Bagaimana untuk mendapatkan faktor skala objek Teks menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk mendapatkan faktor skala objek Teks menggunakan FabricJS?

PHPz

Lepaskan： 2023-08-27 23:13:08

ke hadapan

1006 orang telah melayarinya

Bagaimana untuk mendapatkan faktor skala objek Teks menggunakan FabricJS?

Dalam tutorial ini, kita akan belajar bagaimana untuk mendapatkan faktor skala objek 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 faktor penskalaan objek menggunakan kaedah getObjectScaling.

Tatabahasa

getObjectScaling()

Salin selepas log masuk

Contoh 1

Gunakan kaedah getObjectscaling

Mari kita lihat contoh kod untuk melihat output yang dilog apabila menggunakan kaedah getObjectScaling. Dalam kes ini, nilai skalaX dan skalaY lalai 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 getObjectScaling method</h2>
   <p>You can open console from dev tools and see that the logged 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 getObjectScaling method
      console.log("The scale factor is", text.getObjectScaling());
   </script>
</body>
</html>

Salin selepas log masuk

Contoh 2

Gunakan kaedah getObjectScaling dan lulus harta scaleX

Mari kita lihat contoh kod untuk melihat output dilog apabila kaedah getObjectScaling digunakan bersama-sama dengan sifat scaleX. Dalam kes ini, nilai scaleX objek teks akan kelihatan sebagai 2, manakala nilai scaleY akan kekal tidak berubah.

<!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 getObjectScaling method and passing the scaleX property</h2>
   <p>You can open console from dev tools and see that the logged 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",
         scaleX: 2,
      });

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

      // Using getObjectScaling method
      console.log("The scale factor is", text.getObjectScaling());
   </script>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan faktor skala objek Teks menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!