Bagaimana untuk memangkas ketinggian imej klon menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk memangkas ketinggian imej klon menggunakan FabricJS?

WBOY

Lepaskan： 2023-09-05 10:05:02

ke hadapan

1424 orang telah melayarinya

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

Dalam tutorial ini kita akan belajar cara memangkas tinggi 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 tinggi dalam imej klon, kami menggunakan Ketinggianharta benda.

Tatabahasa

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

Salin selepas log masuk

Parameter

Panggil balik (pilihan) - Parameter ini ialah fungsi yang akan menggunakan contoh imej klon sebagai hujah panggilan 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 tinggi adalah harta.

Kunci pilihan

tinggi - Hartanah ini menerima nilai Nombor, yang menunjukkan pemangkasan Tinggi. Atribut ini adalah pilihan.

Jangan gunakan ketinggianhartanah

Contoh

Mari lihat contoh kod untuk melihat cara objek Imej klon dipaparkan apabila tinggi 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 height 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);
         Img.set("left", 150);
         canvas.add(Img);
      });
   </script>
</body>
</html>

Salin selepas log masuk

Gunakan ketinggianhartanah

Contoh

Dalam contoh ini kami menggunakan atribut height dan memberikannya nilai 50 iaitu Tanaman Ketinggian. Oleh itu, tinggi akan dipotong.

<!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 height 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);
         }, {
            height: 50,
          }
       );
   </script>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Dalam tutorial ini, kami menggunakan dua contoh untuk menunjukkan cara memangkas ketinggian dalam klon Hasilkan imej menggunakan FabricJS.

Atas ialah kandungan terperinci Bagaimana untuk memangkas ketinggian imej klon menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!