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

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

WBOY

Lepaskan： 2023-09-01 13:41:02

ke hadapan

1370 orang telah melayarinya

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

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!