Rumah > Artikel > hujung hadapan web > Bagaimana untuk mendapatkan faktor skala objek Imej menggunakan FabricJS?

Bagaimana untuk mendapatkan faktor skala objek Imej menggunakan FabricJS?

WBOYke hadapan: 2023-09-20 08:37:04881semak imbas

Dalam tutorial ini, kita akan belajar bagaimana untuk mendapatkan faktor skala objek imej menggunakan FabricJS. Kita boleh mencipta objek Imej dengan mencipta instance fabric.Image. Memandangkan ia adalah salah satu elemen asas FabricJS, kami juga boleh menyesuaikannya dengan mudah dengan menggunakan sifat seperti sudut, kelegapan, dsb. Untuk mendapatkan faktor penskalaan objek Imej kami menggunakan kaedah getObjectScaling.

Tatabahasa

getObjectScaling(): Object

Gunakan getObjectscalingkaedah

Contoh

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>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Bagaimana untuk mendapatkan 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,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using getObjectScaling method
      console.log("The scale factor is", image.getObjectScaling());
   </script>
</body>
</html>

Gunakan kaedah getObjectScaling dan lulus sifat scaleX

Contoh

Mari kita lihat contoh kod untuk melihat output dilog apabila kaedah getObjectScaling digunakan bersama-sama dengan sifat scaleX. Dalam kes ini, nilai scaleX objek imej 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>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Bagaimana untuk mendapatkan 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,
         scaleX: 2,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using getObjectScaling method
      console.log("The scale factor is", image.getObjectScaling());
   </script>
</body>
</html>

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan 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：kaedah process.cpuUsage() dalam Node.jsArtikel seterusnya：kaedah process.cpuUsage() dalam Node.js

Artikel berkaitan

Lihat lagi