cari

Rumah >hujung hadapan web >tutorial js >FabricJS - Bagaimana untuk mengalih keluar objek semasa daripada rentetan URL objek Line?

FabricJS - Bagaimana untuk mengalih keluar objek semasa daripada rentetan URL objek Line?

PHPz
PHPzke hadapan
2023-08-27 20:05:09943semak imbas

FabricJS – 如何删除 Line 对象的 URL 字符串中的当前对象转换？

Dalam tutorial ini, kita akan belajar cara mengalih keluar transformasi objek semasa (skala, sudut, flip, condong) daripada 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 mengalih keluar transformasi objek semasa daripada rentetan URL objek Line, kami menggunakan atribut withoutTransform.

Tatabahasa

toDataURL({ withoutTransform: Boolean }: Object): String

Parameter

  • Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan kepada perwakilan URL objek Line. Ketinggian, kualiti, format dan banyak sifat lain boleh diubah menggunakan parameter ini, yang mana tanpaTransform adalah harta.

Kunci pilihan

  • withoutTransform - Sifat ini menerima nilai boolean yang membolehkan kita menyingkirkan perubahan objek semasa. Dengan memberikannya nilai sebenar, tidak akan ada skala, sudut, flip atau kecondongan dalam imej keluaran akhir.

Gunakan atribut withoutTransform dan berikan nilai ralat padanya

Contoh

Mari lihat contoh kod untuk melihat imej output apabila sifat withoutTransform diberikan nilai palsu. 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.

Dalam contoh ini, kami menghantar sifat skalaY dan sudut kepada objek Garisan, masing-masing menyatakan faktor skala menegak dan sudut. Oleh itu, output kami akan diskalakan secara menegak dan diputar sebanyak 70 darjah. Walau bagaimanapun, memandangkan kami juga memberikan nilai palsu kepada sifat withoutTransform, imej keluaran akhir kami masih akan mengandungi sifat skalaY dan sudut. 

<!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 withoutTransform property and passing it a false value</h2>
   <p>
      You can open the console from dev tools and see the output URL. You can copy that and paste it in the address bar of a new tab to see that the final image contains vertical scaling and has an angle of 70 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 a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         angle: 70,
         scaleY: 2,
      });

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

      // Using the toDataURL method
      console.log(line.toDataURL({ withoutTransform: false }));
   </script>
</body>
</html>

Gunakan atribut withoutTransform dan berikan nilai sebenar

Contoh

Mari kita lihat contoh kod untuk melihat rupa imej output akhir objek Line apabila menggunakan sifat withoutTransform dan menghantar nilai sebenar kepadanya. Dalam kes ini, imej keluaran akhir kami tidak akan mengandungi sebarang transformasi objek. 

<!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 withoutTransform property and passing it a true value</h2>
   <p>
      You can open the console from dev tools and see the output URL. You can copy that and paste it in the address bar of a new tab to see that the final image does not contain vertical scaling or an angle of 70 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 a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         angle: 70,
         scaleY: 2,
      });

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

      // Using the toDataURL method
      console.log(line.toDataURL({ withoutTransform: true }));
   </script>
</body>
</html>

Atas ialah kandungan terperinci FabricJS - Bagaimana untuk mengalih keluar objek semasa daripada rentetan URL objek Line?. 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 menyelaraskan bekas Flexbox ke tengah menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk menyelaraskan bekas Flexbox ke tengah menggunakan JavaScript?

Artikel berkaitan

Lihat lagi