Bagaimana untuk menyemak sama ada objek IText diisi menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menyemak sama ada objek IText diisi menggunakan FabricJS?

王林

Lepaskan： 2023-09-12 18:13:02

ke hadapan

1194 orang telah melayarinya

如何使用 FabricJS 检查 IText 对象是否已填充？

Dalam tutorial ini, kita akan belajar cara menyemak sama ada objek IText diisi 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 menyemak sama ada objek IText diisi menggunakan kaedah hasFill.

Tatabahasa

hasFill()

Salin selepas log masuk

Contoh 1

Gunakan kaedah hasFill apabila menggunakan isi transparent

Mari kita lihat contoh kod untuk melihat output dilog apabila kaedah hasFill digunakan dengan isian lutsinar. Kaedah hasFill kembali benar jika objek mempunyai warna isian. Dalam contoh ini, kami menetapkan warna isian kepada "Telus". Oleh itu, output yang dilog adalah palsu.

<!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 hasFill method when transparent fill is used</h2>
   <p>You can open console from dev tools and see that the logged output is false</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.Lorem ipsum dolor sit amet",{
            width: 300,
            left: 60,
            top: 70,
            fill: "transparent",
            fontStyle: "bold",
            backgroundColor: "#f8f4ff",
            stroke: "black",
         }
      );

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

      // Using the hasFill method
      console.log("The value is: ", itext.hasFill());
   </script>
</body>
</html>

Salin selepas log masuk

Contoh 2

Gunakan kaedah hasFill

Mari kita lihat contoh kod untuk melihat output yang dilog apabila menggunakan kaedah hasFill. Dalam kes ini, memandangkan objek IText mempunyai warna isian, nilai sebenar akan dikembalikan.

<!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 hasFill method</h2>
   <p>You can open console from dev tools and see that the value is being displayed in the console</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 dolor sit amet",{
            width: 300,
            left: 60,
            top: 70,
            fill: "#b666d2",
            fontStyle: "bold",
            backgroundColor: "#f8f4ff",
            stroke: "black",
         }
      );

      // Using the hasFill method
      console.log("The value is: ", itext.hasFill());

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

Salin selepas log masuk

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