FabricJS - Bagaimana untuk menskalakan objek imej kepada lebar yang diberikan?-tutorial js-php.cn

FabricJS - Bagaimana untuk menskalakan objek imej kepada lebar yang diberikan?

WBOY

Lepaskan： 2023-09-15 21:13:06

ke hadapan

985 orang telah melayarinya

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

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

Tatabahasa

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

Salin selepas log masuk

Parameter

value - Parameter ini menerima Number yang menentukan nilai lebar baharu objek Imej.
< /里>
mutlak - Parameter ini menerima nilai boolean yang menentukan sama ada port pandangan diabaikan.

Kemunculan lalai objek Imej

Contoh

Mari kita lihat contoh kod untuk melihat rupa objek imej tanpa menggunakan kaedah scaleToWidth. 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

Luluskan nilai tersuai menggunakan kaedah scaleToWidth

Contoh

Dalam contoh ini, kita akan melihat cara menskalakan objek imej kepada lebar tertentu dengan memberikan nilai kepada kaedah scaleToWidth. Oleh kerana kita telah melepasi nilai sebagai 200, ini akan menjadi lebar 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 scaleToWidth method with a custom value</h2>
   <p>You can see that the new width of our image object is 200</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 scaleToWidth method
      image.scaleToWidth(200, 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 kepada lebar yang diberikan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!