Bagaimana untuk mencari faktor skala objek imej menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk mencari faktor skala objek imej menggunakan FabricJS?

PHPz

Lepaskan： 2023-08-23 20:49:03

ke hadapan

987 orang telah melayarinya

Bagaimana untuk mencari faktor skala objek imej menggunakan FabricJS?

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

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!