Bagaimana untuk memusatkan objek Imej dalam paparan semasa kanvas menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk memusatkan objek Imej dalam paparan semasa kanvas menggunakan FabricJS?

WBOY

Lepaskan： 2023-08-24 19:29:02

ke hadapan

1469 orang telah melayarinya

如何使用 FabricJS 将 Image 对象置于画布当前视口的中心？

Dalam tutorial ini kita akan belajar bagaimana untuk memusatkan objek imej dalam paparan semasa Lukiskan kanvas menggunakan FabricJS. Kita boleh mencipta objek Imej dengan mencipta contoh Fabrik.Imej. Memandangkan ia adalah salah satu elemen asas FabricJS, kita juga boleh dengan mudah Sesuaikan dengan menggunakan sifat seperti sudut, kelegapan dan banyak lagi. Untuk memusatkan imej Untuk objek pada paparan semasa kanvas, kami menggunakan kaedah viewportCenter.

Tatabahasa

viewportCenter(): fabric.Object

Salin selepas log masuk

Kemunculan lalai objek Imej

Contoh

Mari lihat contoh kod untuk melihat bila viewportCenter Kaedah tidak digunakan. Dalam kes ini, objek imej tidak akan berpusat 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 that the image object is not centered 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);
   </script>
</body>
</html>

Salin selepas log masuk

Gunakan viewportCenterkaedah

Contoh

Mari lihat contoh kod untuk melihat cara objek imej berfungsi Gunakan kaedah viewportCenter. Dalam kes ini objek imej kami akan menjadi Kedua-dua arah menegak dan mendatar adalah relatif kepada paparan 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 viewportCenter method</h2>
   <p>
      You can see that the image object is centered 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 viewportCenter method
      image.viewportCenter();
   </script>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Dalam tutorial ini, kami menggunakan dua contoh untuk menunjukkan cara memusatkan objek imej atau Gunakan port pandangan semasa pada kanvas FabricJS.

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