Bagaimana untuk menetapkan pengganda untuk menskalakan imej klon menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menetapkan pengganda untuk menskalakan imej klon menggunakan FabricJS?

王林

Lepaskan： 2023-08-27 19:21:10

ke hadapan

665 orang telah melayarinya

如何使用 FabricJS 设置倍数来缩放克隆图像？

Dalam tutorial ini, kita akan belajar cara menetapkan pengganda untuk menskala imej klon menggunakan FabricJS. Kita boleh mencipta objek Imej dengan mencipta instance fabric.Image. Memandangkan ia adalah salah satu elemen asas FabricJS, kami juga boleh menyesuaikannya dengan mudah dengan menggunakan sifat seperti sudut, kelegapan, dsb. Untuk menetapkan pengganda kepada skala imej yang diklon, kami menggunakan atribut pengganda.

Tatabahasa

cloneAsImage( callback: function, { multiplier: 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 kepada imej klon kami. Menggunakan parameter ini kita boleh menetapkan pengganda, memangkas imej yang diklon, mengalih keluar perubahan objek semasa atau boleh mengubah banyak sifat, yang mana Pendarab ialah harta.

Kunci pilihan

multiplier - Hartanah ini menerima nilai Nombor yang mewakili pengganda yang mana imej output akhir diskalakan. Nilai lalai ialah 1.

Jangan gunakan atribut multiplier

Contoh

Mari kita lihat contoh kod untuk melihat cara objek Imej yang diklonkan dipaparkan apabila sifat pengganda tidak digunakan. Dalam kes ini, nilai pengganda lalai 1 digunakan.

<!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 multiplier property</h2> 
   <p>You can see that the clone image uses the default multiplier</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) {
         canvas.add(Img);
      });
   </script>
</body>
</html>

Salin selepas log masuk

Gunakan atribut Pengganda

Contoh

Dalam contoh ini, kami menggunakan atribut multiplier dan memberikannya nilai 2 untuk menunjukkan bahawa imej klon akhir akan diskalakan dua kali dalam arah x dan y.

<!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 multiplier property</h2>
   <p>You can see that the clone image has been scaled</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", 90);
            canvas.add(Img);
         },
         {
            multiplier: 2,
         }
      );
   </script>
</body>
</html>

Salin selepas log masuk

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