Rumah >hujung hadapan web >tutorial js >Bagaimana untuk menetapkan kelegapan imej menggunakan FabricJS?
Dalam tutorial ini, kita akan belajar cara menetapkan kelegapan imej menggunakan FabricJS. kami Objek imej boleh dibuat dengan mencipta contoh fabrik.Imej. kerana ia adalah salah satu daripada Elemen asas FabricJS, kami juga boleh menyesuaikannya dengan mudah dengan menggunakan sifat Seperti sudut, kelegapan, dsb. Untuk menetapkan kelegapan imej, kami menggunakan atribut opacity.
new fabric.Image( element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String, { opacity: Number }: Object, callback: function)
elemen - Parameter ini menerima HTMLImageElement, HTMLCanvasElement, HTMLVideoElement atau rentetan yang mewakili elemen imej. Rentetan mestilah URL dan akan dimuatkan sebagai imej.
Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada objek kami. Menggunakan parameter ini, anda boleh menukar asal, lebar lejang dan banyak sifat lain yang berkaitan dengan objek imej yang kelegapannya ialah atribut.
panggil balik (pilihan) - Parameter ini ialah fungsi yang dipanggil selepas penapis akhir digunakan..
opacity - Hartanah ini menerima Nombor yang membolehkan kita mengawal sesuatu perkara. Nilai lalai bagi sifat opacity ialah 1.
Mari kita lihat contoh kod untuk melihat rupa objek imej kita dengan nilai lalai Kelegapanhartanah. Dalam contoh ini kami tidak menghantar sebarang kekunci legap seperti yang ditunjukkan di bawah -
<!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>Default appearance of Image object</h2> <p>You can see that the image object is fully opaque</p> <canvas id="canvas"></canvas> <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="max-width:90%" / alt="Bagaimana untuk menetapkan kelegapan imej menggunakan FabricJS?" > <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 an Image object var image = new fabric.Image(imageElement, { top: 50, left: 50, }); // Add it to the canvas canvas.add(image); </script> </body> </html>
Dalam contoh ini kita akan melihat cara memberikan nilai kepada sifat opacity berubah Kelegapan objek imej dalam kanvas. Di sini kita menggunakan 0.3 sebagai kelegapan, jadi Menjadikan objek imej kita kelihatan separa lutsinar dan bukannya legap sepenuhnya.
<!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>Passing the opacity property as key</h2> <p>You can see our image object is not fully opaque</p> <canvas id="canvas"></canvas> <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="max-width:90%" / alt="Bagaimana untuk menetapkan kelegapan imej menggunakan FabricJS?" > <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 an Image object var image = new fabric.Image(imageElement, { top: 50, left: 50, opacity: 0.3, }); // Add it to the canvas canvas.add(image); </script> </body> </html>
Atas ialah kandungan terperinci Bagaimana untuk menetapkan kelegapan imej menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!