Rumah > Artikel > hujung hadapan web > Bagaimana untuk meluruskan objek IText menggunakan FabricJS?

Bagaimana untuk meluruskan objek IText menggunakan FabricJS?

王林ke hadapan: 2023-08-25 09:09:061421semak imbas

如何使用 FabricJS 拉直 IText 对象？

Dalam tutorial ini, kita akan belajar cara meluruskan objek 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.

Walau bagaimanapun, 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 meluruskan objek IText menggunakan kaedah Straighten.

Tatabahasa

straighten(): fabric.Object

Contoh 1

Meluluskan nilai kepada sifat sudut tanpa menggunakan kaedah Straighten

Mari lihat contoh kod untuk melihat rupa objek IText tanpa menggunakan kaedah Straighten. Kaedah Straighten meluruskan objek dengan memutarkannya dari sudut semasa ke sudut 0, 90, 180, atau 270, bergantung pada sudut yang lebih dekat. Sifat sudut menetapkan sudut putaran objek dalam darjah. Di sini, kami menentukan sudut sebagai 45 darjah. Tetapi kerana kami tidak menggunakan sifat Straighten, sudut putaran akan kekal pada 45 darjah.

<!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>Passing the angle property a value without using the straighten method</h2>
   <p>You can see that the itext object has an angle of 45 degrees</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 HereLorem ipsum ", {
         width: 300,
         left: 210,
         top: 70,
         fontSize: 30,
         fill: "#b666d2",
         backgroundColor: "#f8f4ff",
         angle: 45,
      });

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

Contoh 2

Gunakan kaedah meluruskan

Mari kita lihat contoh kod untuk melihat rupa objek IText apabila kaedah Straighten digunakan bersama-sama dengan sifat sudut. Walaupun kami menetapkan sudut putaran kepada 45 darjah, objek itext kami akan diluruskan dengan memutarkannya kembali kepada 0 darjah kerana kami menggunakan kaedah Straighten.

<!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 straighten method</h2>
   <p>You can see that the angle of rotation is 0 degree for the itext object</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 HereLorem ipsum ", {
         width: 300,
         left: 210,
         top: 70,
         fontSize: 30,
         fill: "#b666d2",
         backgroundColor: "#f8f4ff",
         angle: 45,
      });

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

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

Atas ialah kandungan terperinci Bagaimana untuk meluruskan objek IText menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

对象 fabric

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk menyemak sama ada tarikh kurang daripada 1 jam yang lalu menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk menyemak sama ada tarikh kurang daripada 1 jam yang lalu menggunakan JavaScript?

Artikel berkaitan

Lihat lagi