FabricJS - Bagaimana untuk mengalih keluar objek semasa daripada rentetan URL objek Line?-tutorial js-php.cn

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

PHPz

Lepaskan： 2023-08-27 20:05:09

ke hadapan

938 orang telah melayarinya

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

Salin selepas log masuk

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. < /p>

<!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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!