FabricJS - Bagaimana untuk memusatkan objek Line secara mendatar pada kanvas?-tutorial js-php.cn

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

WBOY

Lepaskan： 2023-09-11 10:49:02

ke hadapan

697 orang telah melayarinya

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()

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!