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

FabricJS - Bagaimana untuk memusatkan objek Garis secara mendatar dan menegak pada kanvas?

王林

Lepaskan： 2023-09-07 10:37:02

ke hadapan

779 orang telah melayarinya

FabricJS – 如何使 Line 对象在画布上水平和垂直居中？

Dalam tutorial ini, kita akan belajar cara memusatkan objek Garisan secara mendatar dan menegak 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 garis secara mendatar dan menegak pada kanvas, kami menggunakan kaedah tengah.

Tatabahasa

center()

Salin selepas log masuk

Kemunculan lalai objek Garisan

Contoh

Mari kita lihat contoh kod untuk melihat rupa objek garisan kita tanpa menggunakan kaedah tengah. 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</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 Pusat Kaedah

Contoh

Dalam contoh ini kita akan melihat bagaimana dengan menggunakan kaedah tengah kita dapat meletakkan objek garisan tepat di tengah-tengah kanvas. Dalam kes ini, objek dipusatkan secara mendatar dan menegak.

<!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 center method</h2>
   <p>You can see that the line object has been centered 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 center() to center the line object on the canvas
      line.center();
   </script>
</body>
</html>

Salin selepas log masuk

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