Rumah > Artikel > hujung hadapan web > Bagaimana untuk memusatkan objek Imej dalam paparan semasa kanvas menggunakan FabricJS?
Bagaimana untuk memusatkan objek Imej dalam paparan semasa kanvas menggunakan FabricJS?
- WBOYke hadapan
- 2023-08-24 19:29:021442semak imbas
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.
Tatabahasa
viewportCenter(): fabric.Object
Kemunculan lalai objek Imej
Contoh
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>
Gunakan viewportCenterkaedah
Contoh
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>
Kesimpulan
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!