cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk mendayakan penskalaan retina untuk imej klon menggunakan FabricJS?

Bagaimana untuk mendayakan penskalaan retina untuk imej klon menggunakan FabricJS?

WBOY
WBOYke hadapan
2023-09-22 17:21:061540semak imbas

如何使用 FabricJS 为克隆图像启用视网膜缩放？

Dalam tutorial ini kita akan belajar cara mendayakan penskalaan retina untuk imej klon Gunakan 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 Gunakan sifat seperti sudut, kelegapan, dsb. Untuk mendayakan penskalaan retina klon Untuk imej, kami menggunakan atribut enableRetinaScaling. Dalam kes ini, imej klon diskalakan Naikkan devicePixelRatio untuk pemaparan yang lebih baik pada skrin retina. tidak akan ada Tukar rupa imej.

Tatabahasa

cloneAsImage( callback: function, { enableRetinaScaling : Boolean }: Object): fabric.Object

Parameter

  • Panggil balik(pilihan) - Parameter ini ialah fungsi yang akan dipanggil dengan contoh imej klon sebagai hujah 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 menukar banyak sifat lain, yang mana enableRetinaScaling ialah harta.

Kunci pilihan

  • enableRetinaScaling - Hartanah ini menerima nilai Boolean yang membolehkan kami Dayakan penskalaan retina untuk imej klon.

Gunakan atribut enableRetinaScaling dan berikan nilai "palsu" padanya

Contoh

Mari lihat contoh kod untuk memahami bila Gunakan atribut enableRetinaScaling dan berikan nilai "palsu". dalam kes ini, Penskalaan retina tidak akan didayakan. 

<!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 enableRetinaScaling property and passing it a ‘false’ value
   </h2>
   <p>You can see the cloned image with retina scaling disabled</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: "black",
         blur: 12,
      });
      // 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);
         }, {
            enableRetinaScaling: false,
         }
      );
   </script>
</body>
</html>

Gunakan atribut enableRetinaScaling dan berikan nilai "benar"

Contoh

Dalam contoh ini, kami menggunakan atribut enableRetinaScaling dan memberikannya "true" nilai. Oleh itu, penskalaan retina akan didayakan untuk imej klon kami. 

<!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 enableRetinaScaling property and passing it a ‘true’ value
   </h2>
   <p>You can see cloned image with retina scaling enabled</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: "black",
         blur: 12,
      });
      
      // 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);
         }, {
            enableRetinaScaling: true,
         }
      );
   </script>
</body>
</html>

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

Boolean 对象 fabric
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Program JavaScript menyemak sama ada rentetan diputar secara relatif antara satu sama lainArtikel seterusnya：Program JavaScript menyemak sama ada rentetan diputar secara relatif antara satu sama lain

Artikel berkaitan

Lihat lagi