Dalam tutorial ini, kita akan belajar cara mendapatkan kelegapan imej 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 mendapatkan kelegapan Imej, kami menggunakan kaedah getObjectOpacity. p>
getObjectOpacity(): Number
Mari lihat contoh kod untuk melihat output yang dilog apabila menggunakan kaedah getObjectOpacity. Dalam kes ini, kelegapan lalai 1 akan dipaparkan dalam konsol.
<!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 getObjectOpacity method</h2> <p> You can open console from dev tools and see that the logged value is being displayed in the console </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 an Image object var image = new fabric.Image(imageElement, { top: 50, left: 110, }); // Add it to the canvas canvas.add(image); // Using getObjectOpacity method console.log("The opacity is: ", image.getObjectOpacity()); </script> </body> </html>
Mari lihat contoh kod untuk melihat output dilog apabila kaedah getObjectOpacity digunakan bersama-sama dengan sifat kelegapan. Dalam contoh ini, kelegapan objek imej diberikan 0.7, jadi output yang direkodkan ialah 0.7.
<!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 getObjectOpacity method and passing the opacity property</h2> <p> You can open console from dev tools and see that the opacity value is being displayed in the console </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 an Image object var image = new fabric.Image(imageElement, { top: 50, left: 110, opacity: 0.7, }); // Add it to the canvas canvas.add(image); // Using getObjectOpacity method console.log("The opacity is: ", image.getObjectOpacity()); </script> </body> </html>
Atas ialah kandungan terperinci Bagaimana untuk mendapatkan kelegapan objek Imej menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!