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

FabricJS - Bagaimana untuk menukar format rentetan URL objek Line?

王林

Lepaskan： 2023-08-30 10:13:05

ke hadapan

661 orang telah melayarinya

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

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!