cari

Rumah  >  Artikel  >  hujung hadapan web  >  FabricJS - Bagaimana untuk menukar format rentetan URL objek Line?

FabricJS - Bagaimana untuk menukar format rentetan URL objek Line?

王林
王林ke hadapan
2023-08-30 10:13:05700semak imbas

FabricJS – 如何更改 Line 对象的 URL 字符串的格式？

Dalam tutorial ini, kita akan belajar cara menukar format rentetan URL objek Line 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 garisan dengan mencipta contoh Fabric.Line, menyatakan koordinat x dan y garisan dan menambahkannya pada kanvas. Untuk menukar format rentetan URL objek Line, kami menggunakan sifat format.

Tatabahasa

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

Parameter

  • Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan kepada perwakilan URL objek Line. Ketinggian, jisim, pengganda dan banyak sifat lain boleh ditukar menggunakan parameter ini, yang mana 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".

Jangan gunakan nilai lalai atribut format

Contoh

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 pembangun, kami boleh melihat perwakilan URL objek Line. 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 Line 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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         angle: 70,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the toDataURL method
      console.log(line.toDataURL());
   </script>
</body>
</html>

Gunakan toDataURL kaedah dan atribut format

Contoh

Mari kita lihat contoh kod untuk melihat rupa objek Line 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 Line 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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         angle: 70,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the toDataURL method
      console.log(line.toDataURL({format: "jpeg"}));
   </script>
</body>
</html>

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

Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Melaksanakan pepohon carian binari dalam JavaScriptArtikel seterusnya：Melaksanakan pepohon carian binari dalam JavaScript

Artikel berkaitan

Lihat lagi