cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk memangkas lebar imej klon menggunakan FabricJS?

Bagaimana untuk memangkas lebar imej klon menggunakan FabricJS?

王林
王林ke hadapan
2023-08-24 14:09:061163semak imbas

如何使用 FabricJS 裁剪克隆图像的宽度？

Dalam tutorial ini kita akan belajar cara memangkas lebar dalam imej klon menggunakan FabricJS. Kita boleh mencipta objek Imej dengan mencipta contoh fabric.Image. sejak Ia adalah salah satu elemen asas FabricJS dan kami juga boleh menyesuaikannya dengan mudah melalui aplikasi Sudut, kelegapan dan sifat lain. Untuk memangkas lebar dalam imej klon, kami menggunakan LebarHartanah

Tatabahasa

cloneAsImage( callback: function, { width: Number}: Object): fabric.Object

Parameter

  • Panggil balik (pilihan) - Parameter ini ialah fungsi yang akan dipanggil dengan contoh imej klon sebagai parameter pertama.

  • Pilihan (pilihan) - Parameter ini ialah objek pilihan yang menyediakan penyesuaian tambahan pada imej klon kami. Menggunakan parameter ini kita boleh menetapkan pengganda, memangkas imej yang diklon, mengalih keluar perubahan objek semasa atau boleh menukar banyak sifat lain, yang mana lebar ialah harta.

Kunci pilihan

  • lebar - Hartanah ini menerima nilai Nombor, mewakili lebar tanaman. Atribut ini adalah pilihan.

Jangan gunakan atribut lebar

Contoh

Mari lihat contoh kod untuk melihat cara objek Imej klon dipaparkan apabila lebar Harta tidak digunakan. Dalam kes ini, imej klon tidak akan dipangkas. 

<!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>Without using the width property</h2>
   <p>You can see that no cropping has been applied to the clone image</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 a shadow object
      var shadow = new fabric.Shadow({
         color: "#308080",
         blur: 3,
      });
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         skewX: 20,
         shadow: shadow,
      });
      
      // Using cloneAsImage method
      image.cloneAsImage(function(Img) {
         Img.set("top", 150);
         canvas.add(Img);
      });
   </script>
</body>
</html>

Gunakan lebarhartanah

Contoh

Dalam contoh ini kami menggunakan atribut width dan memberikannya nilai 245 iaitu Pangkas Lebar. Oleh itu, lebar akan dipangkas. 

<!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 width property</h2>
   <p>You can see that cropping has been applied to the clone image</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 a shadow object
      var shadow = new fabric.Shadow({
         color: "#308080",
         blur: 3,
      });
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         skewX: 20,
         shadow: shadow,
      });
      
      // Using cloneAsImage method
      image.cloneAsImage(
         function(Img) {
            Img.set("top", 150);
            Img.set("left", 150);
            canvas.add(Img);
         }, {
            width: 245,
         }
      );
   </script>
</body>
</html>

Atas ialah kandungan terperinci Bagaimana untuk memangkas lebar imej klon menggunakan FabricJS?. 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：Bagaimana untuk melangkau elemen dalam .map()?Artikel seterusnya：Bagaimana untuk melangkau elemen dalam .map()?

Artikel berkaitan

Lihat lagi