cari

Rumah >hujung hadapan web >tutorial js >FabricJS - Bagaimana untuk menskalakan imej sama rata secara mendatar dan menegak?

FabricJS - Bagaimana untuk menskalakan imej sama rata secara mendatar dan menegak?

WBOY
WBOYke hadapan
2023-09-06 21:29:071067semak imbas

FabricJS – 如何在水平和垂直方向上均匀缩放图像？

Dalam tutorial ini, kita akan belajar cara menskala imej secara sama rata dan menegak menggunakan FabricJS. Kita boleh mencipta objek Imej dengan mencipta contoh fabric.Image. Memandangkan ia adalah salah satu elemen asas FabricJS, kami juga boleh menyesuaikannya dengan mudah dengan menggunakan sifat seperti sudut, kelegapan, dsb. Untuk skala imej sama rata dalam kedua-dua arah mendatar dan menegak, kami menggunakan kaedah skala.

Tatabahasa

scale(value: Number): fabric.Object

Parameter

  • skala - Parameter ini menerima Number, yang digunakan untuk menetapkan faktor skala objek imej.

    李>

Kemunculan lalai objek Imej

Contoh

Mari kita lihat contoh kod untuk melihat rupa objek imej kita tanpa menggunakan kaedah skala. Dalam kes ini, objek imej kami tidak akan berskala secara mendatar dan menegak. 

<!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>Default appearance of the Image object</h2>
   <p>
      You can see that the object has not been scaled in horizontal or vertical direction
   </p> 
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <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);
   </script>
</body>
</html>

Luluskan nilai tersuai menggunakan kaedah skala

Contoh

Dalam contoh ini, kini kita akan melihat bahawa nilai sedang diberikan kepada kaedah skala, yang menskalakan objek imej kita secara sama rata secara mendatar dan menegak. Memandangkan kami telah melepasi nilai sebagai 2, itulah faktor skala yang perlu dipertimbangkan sekarang. 

<!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>Passing the scale method with a custom value</h2>
   <p>
      You can see that the object has been scaled in horizontal and vertical direction
   </p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <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,
      });
      
      // Using the scale method
      image.scale(2);
      
      // Add it to the canvas 
      canvas.add(image);
   </script>
</body>
</html>

Atas ialah kandungan terperinci FabricJS - Bagaimana untuk menskalakan imej sama rata secara mendatar dan menegak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

值传递 number 对象 fabric
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk memanggil fungsi dengan parameter awalan separa dalam JavaScript?Artikel seterusnya：Bagaimana untuk memanggil fungsi dengan parameter awalan separa dalam JavaScript?

Artikel berkaitan

Lihat lagi