Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencari faktor skala objek imej menggunakan FabricJS?

Bagaimana untuk mencari faktor skala objek imej menggunakan FabricJS?

PHPzke hadapan: 2023-08-23 20:49:03954semak imbas

Dalam tutorial ini, kita akan belajar cara mencari faktor skala objek imej menggunakan FabricJS. Kita boleh mencipta objek imej dengan mencipta contoh fabrik.Imej. Memandangkan ia adalah salah satu elemen asas FabricJS, kami juga boleh menyesuaikannya dengan mudah dengan menggunakan sifat seperti sudut, kelegapan, dsb. Untuk mencari faktor penskalaan objek imej, kami menggunakan kaedah getTotalObjectScaling.

Tatabahasa

getTotalObjectScaling(): Object

Gunakan getTotalObjectScalingkaedah

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

Dalam contoh ini, kami menggunakan kaedah getTotalObjectScaling untuk mendapatkan faktor penskalaan objek imej. Dalam kes ini, output yang direkodkan adalah kira-kira 1.5 untuk skalaX dan skalaY masing-masing.

<!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 getTotalObjectScaling method</h2>
   <p>
      You can open the console from dev tools to see that the logged output
      contains the object scale factor
   </p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Bagaimana untuk mencari faktor skala objek imej menggunakan FabricJS?" >
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         skewX: 15,
      });
      // Add it to the canvas
      canvas.add(image);
      // Using the getTotalObjectScaling method
      console.log(
         "The scale factor of the Image object is: ",
         image.getTotalObjectScaling()
      );
   </script>
</body>
</html>

Gunakan kaedah getTotalObjectScaling dan sifat scaleX

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

Mari kita lihat contoh kod tentang rupa output log apabila menggunakan kaedah getTotalObjectScaling dengan sifat scaleX. Di sini, kami menetapkan nilai atribut scaleX kepada 2. Jadi keluaran log menunjukkan bahawa nilai skalaX adalah sekitar 3, manakala nilai skalaY tetap sama.

<!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 getTotalObjectScaling method along with scaleX property</h2>
   <p>
      You can open the console from dev tools to see that the logged output contains the object scale factor
   </p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Bagaimana untuk mencari faktor skala objek imej menggunakan FabricJS?" >
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         skewX: 15,
         scaleX: 2, 
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the getTotalObjectScaling method
      console.log(
         "The scale factor of the Image object is: ",
         image.getTotalObjectScaling()
      );
   </script>
</body>
</html>

Atas ialah kandungan terperinci Bagaimana untuk mencari faktor skala objek imej 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 menguji nilai x terhadap fungsi predikat dalam JavaScript dan mengembalikan fn(x) atau x?Artikel seterusnya：Bagaimana untuk menguji nilai x terhadap fungsi predikat dalam JavaScript dan mengembalikan fn(x) atau x?

Artikel berkaitan

Lihat lagi