Rumah > Artikel > hujung hadapan web > FabricJS - Bagaimana untuk menskalakan objek imej kepada lebar yang diberikan?

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

WBOYke hadapan: 2023-09-15 21:13:06957semak imbas

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

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>

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>

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!

值传递 number 对象 fabric

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Program JavaScript untuk mengira bilangan putaran yang diperlukan untuk mengisih tatasusunan yang diberikan dalam susunan yang tidak bertambahArtikel seterusnya：Program JavaScript untuk mengira bilangan putaran yang diperlukan untuk mengisih tatasusunan yang diberikan dalam susunan yang tidak bertambah

Artikel berkaitan

Lihat lagi