FabricJS - Bagaimana untuk menskalakan imej sama rata secara mendatar dan menegak?-tutorial js-php.cn

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

WBOY

Lepaskan： 2023-09-06 21:29:07

ke hadapan

978 orang telah melayarinya

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

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!