FabricJS - Bagaimana untuk membuang bayang objek semasa dalam imej klon?-tutorial js-php.cn

FabricJS - Bagaimana untuk membuang bayang objek semasa dalam imej klon?

王林

Lepaskan： 2023-09-16 13:13:27

ke hadapan

1100 orang telah melayarinya

FabricJS – 如何删除克隆图像中当前对象的阴影？

Dalam tutorial ini, kita akan belajar cara mengalih keluar bayang objek semasa dalam imej klon menggunakan FabricJS. Kita boleh mencipta objek Imej dengan mencipta contoh fabric.Image. Memandangkan ia adalah salah satu elemen asas FabricJS, kami juga boleh menyesuaikannya dengan mudah dengan menggunakan sifat seperti sudut, kelegapan, dsb. Untuk mengalih keluar bayang objek semasa dalam imej klon, kami menggunakan atribut withoutShadow.

tatabahasa

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

Salin selepas log masuk

parameter

Panggil Balik (pilihan) - Parameter ini ialah fungsi yang akan menggunakan contoh imej klon Yang pertama memanggil hujah.
options (pilihan) - Parameter ini ialah objek pilihan yang memberikan kami imej Klon tambahan penyesuaian. Menggunakan parameter ini kita boleh menetapkan pengganda, memangkas imej yang diklon, mengalih keluar transformasi objek semasa atau boleh menukar banyak sifat lain, yang mana tanpaBayang ialah harta.

Kunci pilihan

withoutShadow - Sifat ini menerima Boolean nilai yang menentukan sama ada untuk mengalih keluar objek semasa Atribut ini adalah pilihan.

Gunakan atribut withoutShadow dan berikan nilai "benar"

Contoh

Mari lihat contoh kod untuk melihat cara objek Imej yang diklonkan dipaparkan apabila menggunakan sifat withoutShadow dan menghantar nilai "benar" kepadanya. Di sini, objek imej telah diberikan sifat bayang-bayang. Walau bagaimanapun, memandangkan kami memberikan nilai "benar" kepada harta withoutShadow, bayang objek akan dialih keluar dan imej klon kami tidak akan mempunyai bayang-bayang lagi.

<!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 withoutShadow property and passing it a ‘true’ value</h2>
   <p>You can see that clone image does not have a shadow</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);
         },
         {
            withoutShadow: true,
         }
      );
   </script>
</body>
</html>

Salin selepas log masuk

Gunakan atribut withoutShadow dan berikan nilai "palsu"

Contoh

Dalam contoh ini, kami menggunakan atribut withoutShadow dan memberikannya nilai "palsu". Oleh itu, bayang objek klon kami tidak akan dialih keluar.

<!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 withoutShadow property and passing it a ‘false’ value</h2>
   <p>You can see that clone image contains a shadow</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);
         },
         {
            withoutShadow: false,
         }
      );
   </script>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci FabricJS - Bagaimana untuk membuang bayang objek semasa dalam imej klon?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!