Rumah > Artikel > hujung hadapan web > Bagaimana untuk memusatkan objek Imej dalam paparan semasa kanvas menggunakan FabricJS?
Dalam tutorial ini kita akan belajar bagaimana untuk memusatkan objek imej dalam paparan semasa Lukiskan kanvas menggunakan FabricJS. Kita boleh mencipta objek Imej dengan mencipta contoh Fabrik.Imej. Memandangkan ia adalah salah satu elemen asas FabricJS, kita juga boleh dengan mudah Sesuaikan dengan menggunakan sifat seperti sudut, kelegapan dan banyak lagi. Untuk memusatkan imej Untuk objek pada paparan semasa kanvas, kami menggunakan kaedah viewportCenter.
viewportCenter(): fabric.Object
Mari lihat contoh kod untuk melihat bila viewportCenter Kaedah tidak digunakan. Dalam kes ini, objek imej tidak akan berpusat pada kanvas.
<!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 the Image object</h2> <p> You can see that the image object is not centered with respect to the current viewport of canvas </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); </script> </body> </html>
Mari lihat contoh kod untuk melihat cara objek imej berfungsi Gunakan kaedah viewportCenter. Dalam kes ini objek imej kami akan menjadi Kedua-dua arah menegak dan mendatar adalah relatif kepada paparan semasa kanvas.
<!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 viewportCenter method</h2> <p> You can see that the image object is centered with respect to the current viewport of canvas </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 the viewportCenter method image.viewportCenter(); </script> </body> </html>
Dalam tutorial ini, kami menggunakan dua contoh untuk menunjukkan cara memusatkan objek imej atau Gunakan port pandangan semasa pada kanvas FabricJS.
Atas ialah kandungan terperinci Bagaimana untuk memusatkan objek Imej dalam paparan semasa kanvas menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!