cari

Rumah  >  Artikel  >  hujung hadapan web  >  FabricJS - Bagaimana untuk memusatkan objek Line secara mendatar pada paparan semasa kanvas?

FabricJS - Bagaimana untuk memusatkan objek Line secara mendatar pada paparan semasa kanvas?

WBOY
WBOYke hadapan
2023-09-01 13:41:021345semak imbas

FabricJS – 如何将 Line 对象水平居中在画布的当前视口上？

Dalam tutorial ini, kita akan belajar cara untuk memusatkan objek Line secara mendatar pada paparan semasa kanvas menggunakan FabricJS. Elemen garis ialah salah satu elemen asas yang disediakan dalam FabricJS. Ia digunakan untuk membuat garis lurus. Memandangkan elemen garis adalah geometri satu dimensi dan tidak mengandungi bahagian dalam, ia tidak pernah diisi. Kita boleh mencipta objek garis dengan mencipta contoh fabric.Line, menyatakan koordinat x dan y garisan dan menambahkannya pada kanvas. Untuk memusatkan objek Line secara mendatar dalam viewport semasa kanvas, kami menggunakan kaedah viewportCenterH.

tatabahasa

viewportCenterH(): fabric.Object

Kemunculan lalai objek Garisan

Contoh

Mari lihat contoh kod untuk melihat rupa objek Line tanpa menggunakan kaedah viewportCenterH. Dalam kes ini, objek Line tidak akan dipusatkan secara mendatar 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 Line object</h2>
   <p>
      You can see that the line object is not centered horizontally with respect to the current viewport of canvas
   </p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 6,
      });
      
      // Add it to the canvas
      canvas.add(line);
   </script>
</body>
</html>

Gunakan viewportCenterH kaedah

Contoh

Mari lihat contoh kod untuk melihat rupa objek garis apabila menggunakan kaedah viewportCenterH. Dalam kes ini, objek baris kami akan dipusatkan secara mendatar berbanding 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 line object is centered horizontally with respect to the current viewport of canvas
   </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 6,
      });
   
      // Add it to the canvas
      canvas.add(line);
      
      // Using the viewportCenterH method
      line.viewportCenterH();
   </script>
</body>
</html>

Atas ialah kandungan terperinci FabricJS - Bagaimana untuk memusatkan objek Line secara mendatar pada paparan semasa kanvas?. 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：Terangkan pelbagai jenis penjana dalam JavaScriptArtikel seterusnya：Terangkan pelbagai jenis penjana dalam JavaScript

Artikel berkaitan

Lihat lagi