cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk memusatkan objek Imej secara menegak pada paparan semasa kanvas menggunakan FabricJS?

Bagaimana untuk memusatkan objek Imej secara menegak pada paparan semasa kanvas menggunakan FabricJS?

WBOY
WBOYke hadapan
2023-09-11 14:21:111521semak imbas

如何使用 FabricJS 将 Image 对象在画布的当前视口上垂直居中？

Dalam tutorial ini kami akan menunjukkan cara menegak objek imej Port pandangan semasa kanvas menggunakan FabricJS. Kita boleh mencipta objek Imej dengan Contoh fabrik.Imej. Memandangkan ia adalah salah satu elemen asas FabricJS, kita juga boleh Sesuaikan dengan mudah dengan menggunakan sifat seperti sudut, kelegapan dan banyak lagi. Untuk memusatkan imej Objek diletakkan secara menegak pada paparan semasa kanvas, kami menggunakan kaedah viewportCenterV.

tatabahasa

viewportCenterV(): fabric.Object

Kemunculan lalai objek Imej

Contoh

Mari lihat contoh kod untuk melihat rupa objek Imej kita apabila menggunakan kaedah viewportCenterV Tidak digunakan. Dalam kes ini, objek imej tidak akan dipusatkan secara menegak pada kanvas. 

<!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 the default appearance of Image object</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>

Gunakan viewportCenterVkaedah

Contoh

Mari lihat contoh kod untuk melihat cara objek imej berfungsi Gunakan kaedah viewportCenterV. Dalam kes ini objek imej kami akan dipusatkan Menegak berbanding dengan port pandangan semasa kanvas. 

<!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>Using the viewportCenterV method</h2>
   <p>
      You can see that the image object is centered vertically with respect to the current viewport of canvas
   </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);
      
      // Using the viewportCenterV method
      image.viewportCenterV();
   </script>
</body>
</html>

KESIMPULAN

Dalam tutorial ini, kami menggunakan dua contoh untuk menunjukkan cara memusatkan objek imej Paparkan secara menegak pada paparan semasa kanvas menggunakan FabricJS.

Atas ialah kandungan terperinci Bagaimana untuk memusatkan objek Imej secara menegak pada paparan semasa kanvas menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

对象 fabric
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk menghentikan penyebaran acara menggunakan atribut onclick inline dalam JavaScript?Artikel seterusnya：Bagaimana untuk menghentikan penyebaran acara menggunakan atribut onclick inline dalam JavaScript?

Artikel berkaitan

Lihat lagi