Bagaimana untuk mendayakan penskalaan retina untuk imej klon menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk mendayakan penskalaan retina untuk imej klon menggunakan FabricJS?

WBOY

Lepaskan： 2023-09-22 17:21:06

ke hadapan

1555 orang telah melayarinya

如何使用 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

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!