Bagaimana untuk menukar format rentetan URL objek IText menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menukar format rentetan URL objek IText menggunakan FabricJS?

WBOY

Lepaskan： 2023-09-07 12:45:02

ke hadapan

507 orang telah melayarinya

Bagaimana untuk menukar format rentetan URL objek IText menggunakan FabricJS?

Dalam tutorial ini, kita akan belajar cara menukar format rentetan URL 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.

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 sifat format untuk menukar format rentetan URL objek IText.

Tatabahasa

toDataURL({ format: String }: Object): String

Salin selepas log masuk

Parameter

pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan untuk perwakilan URL objek IText. Ketinggian, jisim, pengganda dan banyak sifat lain boleh ditukar menggunakan parameter ini, dengan format ialah sifat

Kunci pilihan

format - Sifat ini menerima nilai String yang membolehkan kami mentakrifkan format imej output. Nilai yang diterima ialah "jpeg" atau "png". Nilai lalai ialah "png".

Contoh 1

Jangan gunakan nilai lalai atribut format

Mari kita lihat contoh kod untuk melihat output yang dilog apabila menggunakan kaedah toDataURL tanpa menggunakan atribut format. Sebaik sahaja kami membuka konsol daripada alat pembangunan, kami boleh melihat perwakilan URL objek IText. Kami boleh menyalin URL dan menampalnya ke dalam bar alamat tab baharu untuk melihat output akhir. Memandangkan kami tidak menyatakan format imej, ia akan berdasarkan set lalai "png".

<!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 value without using the format property</h2>
   <p> You can open console from dev tools and see that the URL representation of the IText object has a "png" format by default </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 shadow object
      var shadow = new fabric.Shadow({
         blur: 25,
         color: "grey",
         offsetX: 12,
         offsetY: 15,
      });

      // Initiate an itext object
      var itext = new fabric.IText(
         "Add sample text here.Lorem ipsum dolor sit amet consectetur adipiscing.",{
            width: 300,
            left: 60,
            top: 70,
            fill: "#c70039",
            backgroundColor: "#c1dfed",
            stroke: "#c70039",
            originX: "center",
            shadow: shadow,
         }
      );

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

      // Using the toDataURL method
      console.log(itext.toDataURL());
   </script>
</body>
</html>

Salin selepas log masuk

Contoh 2

Gunakan kaedah toDataURL dan atribut format

Mari lihat contoh kod untuk melihat rupa objek IText apabila kaedah toDataURL digunakan dengan sifat format. Dalam kes ini kita akan dapat menentukan format imej akhir. Memandangkan nilai yang diberikan di sini ialah "jpeg", imej akhir akan berada dalam format "jpeg".

<!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 toDataURL method along with format property</h2>
   <p> You can open console from dev tools and see that the URL representation of the IText object has a "jpeg" format now </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 shadow object
      var shadow = new fabric.Shadow({
         blur: 25,
         color: "grey",
         offsetX: 12,
         offsetY: 15,
      });

      // Initiate an itext object
      var itext = new fabric.IText(
         "Add sample text here.Lorem ipsum dolor sit amet consectetur adipiscing.",{
            width: 300,
            left: 60,
            top: 70,
            fill: "#c70039",
            backgroundColor: "#c1dfed",
            stroke: "#c70039",
            originX: "center",
            shadow: shadow,
         }
      );

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

      // Using the toDataURL method
      console.log(itext.toDataURL({format: "jpeg"}));
   </script>
</body>
</html>

Salin selepas log masuk

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