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

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

王林

Lepaskan： 2023-09-03 19:21:06

ke hadapan

1423 orang telah melayarinya

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

Dalam tutorial ini kita akan belajar cara memusatkan objek imej secara mendatar Port pandangan semasa kanvas menggunakan FabricJS. Kita boleh mencipta objek Imej dengan Contoh fabrik.Imej. Memandangkan ia adalah salah satu elemen asas FabricJS, kita boleh Ia juga boleh disesuaikan dengan mudah dengan menggunakan sifat seperti sudut, kelegapan dan banyak lagi. Untuk meletakkan objek Imej secara mendatar pada paparan semasa kanvas, kami menggunakan viewportCenterH kaedah.

Tatabahasa

viewportCenterH(): fabric.Object

Salin selepas log masuk

Kemunculan lalai objek Imej

Contoh

Mari kita lihat contoh kod untuk melihat apa yang berlaku apabila viewportCenterH Kaedah tidak digunakan. Dalam kes ini objek imej tidak akan dipusatkan secara mendatar 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>

Salin selepas log masuk

Gunakan viewportCenterHkaedah

Contoh

Mari lihat contoh kod untuk melihat cara objek imej berfungsi Gunakan kaedah viewportCenterH. Dalam kes ini objek imej kami akan dipusatkan secara mendatar berkenaan dengan 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 viewportCenterH method</h2>
   <p>
      You can see that the image object is centered horizontally 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 viewportCenterH method
      image.viewportCenterH();
   </script>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Dalam tutorial ini, kami menggunakan dua contoh untuk menunjukkan cara memusatkan objek imej Letakkan kanvas secara mendatar pada port pandang semasa menggunakan FabricJS.

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