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

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

PHPz

Lepaskan： 2023-09-03 15:17:02

ke hadapan

1075 orang telah melayarinya

FabricJS – 如何将 Line 对象在画布上垂直居中？

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

Syntax

 centerV()

Salin selepas log masuk

Kemunculan lalai bagi objek Baris

Contoh

#🎜🎜 untuk lihat kod apa yang perlu dilihat jika objek garisan kita kelihatan seperti apabila menggunakan kaedah

centerV. 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 has not been centered vertically 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

centerVkaedah

Contoh

Dalam contoh ini kita akan melihat bagaimana dengan menggunakan kaedah

centerV kita dapat meletakkan objek garis tepat di tengah menegak kanvas. Dalam kes ini, objek dipusatkan secara 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 centerV method</h2>
   <p>
      You can see that the line object has been centered vertically 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 centerV() method to center line object vertically
      line.centerV();
   </script>
</body>
</html>

Salin selepas log masuk

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