cari

Rumah >hujung hadapan web >tutorial js >FabricJS - Bagaimana untuk memusatkan objek Line secara mendatar pada kanvas?

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

WBOY
WBOYke hadapan
2023-09-11 10:49:02705semak imbas

FabricJS – 如何将 Line 对象在画布上水平居中？

Dalam tutorial ini, kita akan belajar cara memusatkan objek Garisan secara mendatar pada 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 garisan dengan mencipta contoh fabric.Line, menyatakan koordinat x dan y garisan dan menambahkannya pada kanvas. Untuk memusatkan objek garisan secara mendatar pada kanvas, kami menggunakan kaedah centerH.

Syntax

 centerH()

Kemunculan lalai objek Line

Contoh

Mari kita lihat contoh kod untuk melihat rupa objek baris kita tanpa menggunakan kaedah centerH. Dalam kes ini, objek garisan 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 has not been centered horizontally on the 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: 20,
      });
      
      // Add it to the canvas
      canvas.add(line);
   </script>
</body>
</html>

Gunakan centerHkaedah

Contoh

Dalam contoh ini kita akan melihat bagaimana dengan menggunakan kaedah centerH kita boleh meletakkan objek garis tepat di tengah mendatar kanvas. Dalam kes ini, objek dipusatkan secara mendatar. 

<!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 centerH method</h2>
   <p>
      You can see that the line object has been centered horizontally on the 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: 20,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the centerH() method to center line object horizontally
      line.centerH();
   </script>
</body>
</html>

Atas ialah kandungan terperinci FabricJS - Bagaimana untuk memusatkan objek Line secara mendatar pada 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：Bagaimanakah saya boleh menunjukkan div memuatkan halaman sehingga halaman dimuatkan?Artikel seterusnya：Bagaimanakah saya boleh menunjukkan div memuatkan halaman sehingga halaman dimuatkan?

Artikel berkaitan

Lihat lagi