FabricJS - Bagaimana untuk memusatkan objek Line dalam viewport semasa kanvas?-tutorial js-php.cn

FabricJS - Bagaimana untuk memusatkan objek Line dalam viewport semasa kanvas?

王林

Lepaskan： 2023-08-24 22:41:05

ke hadapan

740 orang telah melayarinya

FabricJS – 如何将 Line 对象置于画布当前视口的中心？

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

Syntax

 viewportCenter(): fabric.Object

Salin selepas log masuk

Kemunculan lalai objek Line

Contoh

Mari kita lihat contoh kod untuk melihat rupa objek Line apabila tidak menggunakan kaedah viewportCenter. Dalam kes ini, objek garisan tidak akan berpusat 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 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: 20,
      });
      
      // Add it to the canvas
      canvas.add(line);
   </script>
</body>
</html>

Salin selepas log masuk

Gunakan viewportCenterkaedah

Contoh

Mari kita lihat contoh kod untuk melihat rupa objek garis apabila menggunakan kaedah viewportCenter. Dalam kes ini, objek baris kami akan dipusatkan secara relatif kepada 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 viewportCenter method</h2>
   <p>
      You can see that the line object is centered 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: 20,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the viewportCenter method
      line.viewportCenter();
   </script>
</body>
</html>

Salin selepas log masuk

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