cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk meluruskan objek Imej menggunakan FabricJS?

Bagaimana untuk meluruskan objek Imej menggunakan FabricJS?

WBOY
WBOYke hadapan
2023-09-14 16:53:021461semak imbas

如何使用 FabricJS 拉直 Image 对象？

Dalam tutorial ini, kita akan belajar cara meluruskan objek imej menggunakan FabricJS. Kita boleh mencipta objek Imej dengan mencipta instance fabric.Image. Oleh kerana ia adalah satu Elemen asas FabricJS, kami juga boleh menyesuaikannya dengan mudah melalui aplikasi Sifat seperti sudut, kelegapan, dsb. Untuk meluruskan objek imej yang kami gunakan MeluruskanKaedah.

Tatabahasa

straighten(): fabric.Object

Pas nilai kepada sifat sudut tanpa menggunakan luruskan Kaedah

Contoh

Mari kita lihat contoh kod untuk melihat rupa objek Imej kita apabila luruskan Kaedah tidak digunakan. Kaedah luruskan luruskan berfungsi dengan memutarkan objek dari kedudukannya Sudut semasa ialah 0, 90, 180, atau 270, dsb., bergantung pada sudut mana yang lebih dekat. sudut Harta menetapkan sudut putaran objek dalam darjah. Di sini kami nyatakan Sudutnya ialah 45. Tetapi kerana kami tidak menggunakan atribut luruskan, sudut putaran Ia akan kekal 45 darjah. 

<!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>
      Passing the angle property a value without using the straighten method
   </h2>
   <p>You can see that the Image object has an angle of 45 degrees</p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         angle: 45,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Menggunakan kaedah luruskan

Contoh

Mari kita lihat contoh kod untuk melihat rupa objek Imej apabila luruskan Kaedah yang digunakan bersama dengan sifat sudut. Walaupun kita telah menetapkan sudut Diputar kepada 45 darjah, objek imej kita akan diluruskan dengan memutarkannya kembali kepada 0 ijazah kerana kami telah menggunakan kaedah meluruskan. 

<!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 straighten method</h2>
   <p>
      You can see that the angle of rotation is 0 degree for the image object
   </p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         angle: 45,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the straighten method
      image.straighten();
   </script>
</body>
</html>

Atas ialah kandungan terperinci Bagaimana untuk meluruskan objek Imej menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

using 对象 fabric
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk mencari ketinggian kotak teks dalam IText menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk mencari ketinggian kotak teks dalam IText menggunakan FabricJS?

Artikel berkaitan

Lihat lagi