Bagaimana untuk memusatkan objek secara menegak berbanding dengan paparan semasa kanvas dalam IText menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk memusatkan objek secara menegak berbanding dengan paparan semasa kanvas dalam IText menggunakan FabricJS?

王林

Lepaskan： 2023-08-24 10:21:10

ke hadapan

1372 orang telah melayarinya

如何使用 FabricJS 将对象相对于 IText 中画布的当前视口垂直居中？

Dalam tutorial ini, kita akan belajar cara memusatkan objek secara menegak berbanding dengan port pandangan semasa kanvas dalam IText menggunakan FabricJS. Kelas IText telah diperkenalkan dalam FabricJS versi 1.4, yang memanjangkan Fabric.Text dan digunakan untuk mencipta kejadian IText. Kejadian IText memberi kita kebebasan untuk memilih, memotong, menampal atau menambah teks baharu tanpa konfigurasi tambahan. Terdapat juga pelbagai kombinasi kekunci yang disokong dan kombinasi tetikus/sentuh untuk menjadikan teks interaktif yang tidak tersedia dalam Teks.

Namun, Textbox berdasarkan IText membolehkan kami mengubah saiz segi empat tepat teks dan membalutnya secara automatik. Ini tidak berlaku untuk IText, kerana ketinggian tidak melaras berdasarkan pemisah baris. Kita boleh memanipulasi objek IText dengan menggunakan pelbagai sifat. Begitu juga, kita boleh menggunakan kaedah viewportCenterV untuk memusatkan objek secara menegak berbanding dengan viewport semasa kanvas.

Tatabahasa

viewportCenterV(): fabric.Object

Salin selepas log masuk

Contoh 1

Kemunculan lalai objek IText

Mari kita lihat contoh kod untuk melihat rupa objek IText tanpa menggunakan kaedah viewportCenterV. Dalam kes ini, objek itext tidak akan berpusat 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 IText object</h2>
   <p>You can see that the itext object has not been centered vertically withrespect 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 an itext object
      var itext = new fabric.IText("Add sample text here.", {
         width: 300,
         left: 50,
         top: 70,
         fill: "red",
      });

      // Add it to the canvas
      canvas.add(itext);
   </script>
</body>
</html>

Salin selepas log masuk

Contoh 2

Gunakan kaedah viewportCenterV

Mari lihat contoh kod untuk melihat rupa objek IText apabila menggunakan kaedah viewportCenterV. Dalam kes ini, objek IText 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 viewportCenterV method</h2>
   <p>You can see that the itext object has been 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 an itext object
      var itext = new fabric.IText("Add sample text here.", {
         width: 300,
         left: 50,
         top: 70,
         fill: "red",
      });

      // Add it to the canvas
      canvas.add(itext);

      // Using the viewportCenterV method
      itext.viewportCenterV();
   </script>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk memusatkan objek secara menegak berbanding dengan paparan semasa kanvas dalam IText menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!