FabricJS - Bagaimana untuk menskalakan objek imej ke ketinggian tertentu?-tutorial js-php.cn

FabricJS - Bagaimana untuk menskalakan objek imej ke ketinggian tertentu?

WBOY

Lepaskan： 2023-09-10 19:13:02

ke hadapan

1357 orang telah melayarinya

FabricJS – 如何将图像对象缩放到给定高度？

Dalam tutorial ini, kita akan belajar cara menskalakan objek Imej ke ketinggian tertentu 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 menskalakan objek Imej kepada ketinggian tertentu, kami menggunakan kaedah scaleToHeight.

tatabahasa

scaleToHeight(value: Number, absolute: Boolean): fabric.Object

Salin selepas log masuk

parameter

value - Parameter ini menerima Nombor, yang menentukan nilai ketinggian baharu objek Imej .
< /里>
absolute - Parameter ini menerima nilai boolean yang menentukan sama ada port paparan diabaikan.

Kemunculan lalai objek Imej

Contoh

Mari lihat contoh kod untuk melihat rupa objek imej tanpa menggunakan kaedah scaleToHeight. Dalam kes ini, objek imej kami tidak akan berskala secara mendatar atau 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

Gunakan nilai tersuai untuk lulus scaleToHeight kaedah

Contoh

Dalam contoh ini, kita akan melihat cara menskalakan objek imej kepada ketinggian tertentu dengan memberikan nilai kepada kaedah skalaKetinggian. Memandangkan kita telah melepasi nilai sebagai 100, ini akan menjadi ketinggian baharu objek imej.

<!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 scaleToHeight method with a custom value</h2>
   <p>You can see that the new height of our image object is 100</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 scaleToHeight method
      image.scaleToHeight(100, false);
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci FabricJS - Bagaimana untuk menskalakan objek imej ke ketinggian tertentu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!