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

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

WBOY

Lepaskan： 2023-09-14 12:41:09

ke hadapan

1919 orang telah melayarinya

FabricJS – 如何使 Line 对象在画布的当前视口上垂直居中？

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

Syntax

 viewportCenterV(): fabric.Object

Salin selepas log masuk

Kemunculan lalai objek Line

Contoh

Mari kita lihat contoh kod untuk melihat rupa objek Line kita tanpa menggunakan kaedah viewportCenterV. Dalam kes ini, objek garisan tidak akan dipusatkan secara menegak 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 vertically 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 viewportCenterVkaedah

Contoh

Mari lihat contoh kod untuk mengetahui masanya Gunakan kaedah viewportCenterV. Dalam kes ini objek baris kami akan berpusat secara menegak Berbanding dengan port pandangan 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 viewportCenterV method</h2>
   <p>
      You can see that the line object is centered vertically 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 viewportCenterV method
      line.viewportCenterV();
   </script>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci FabricJS - Bagaimana untuk memusatkan objek Line secara menegak pada paparan semasa kanvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!