Rumah > Artikel > hujung hadapan web > FabricJS - Bagaimana untuk memusatkan objek Line secara menegak pada paparan semasa kanvas?
FabricJS - Bagaimana untuk memusatkan objek Line secara menegak pada paparan semasa kanvas?
- WBOYke hadapan
- 2023-09-14 12:41:091849semak imbas
Dalam tutorial ini, kita akan belajar cara memusatkan objek Garis secara menegak pada port pandangan semasa kanvas menggunakan FabricJS. Elemen garis ialah salah satu elemen asas yang disediakan dalam FabricJS. Ia digunakan untuk membuat garis lurus. Memandangkan elemen garis adalah geometri satu dimensi dan tidak mengandungi bahagian dalam, ia tidak pernah diisi. Kita boleh mencipta objek garisan dengan mencipta contoh fabric.Line, menyatakan koordinat x dan y garisan dan menambahkannya pada kanvas. Untuk memusatkan objek Garis secara menegak pada port pandangan semasa kanvas, kami menggunakan kaedah viewportCenterV.
Syntax
viewportCenterV(): fabric.Object
Kemunculan lalai objek Line
Contoh
Mari kita lihat contoh kod untuk melihat rupa objek Line kita tanpa menggunakan kaedah viewportCenterV. Dalam kes ini, objek garisan tidak akan dipusatkan secara menegak 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 Line object</h2>
<p>
You can see that the line object is not centered vertically with respect to the current viewport of canvas
</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a Line object
var line = new fabric.Line([200, 100, 100, 40], {
stroke: "blue",
strokeWidth: 6,
});
// Add it to the canvas
canvas.add(line);
</script>
</body>
</html>
Gunakan viewportCenterVkaedah
Contoh
Mari lihat contoh kod untuk mengetahui masanya Gunakan kaedah viewportCenterV. Dalam kes ini objek baris kami akan berpusat secara menegak Berbanding dengan port pandangan 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 viewportCenterV method</h2>
<p>
You can see that the line object is centered vertically with respect to the current viewport of canvas
</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a Line object
var line = new fabric.Line([200, 100, 100, 40], {
stroke: "blue",
strokeWidth: 6,
});
// Add it to the canvas
canvas.add(line);
// Using the viewportCenterV method
line.viewportCenterV();
</script>
</body>
</html>
Atas ialah kandungan terperinci FabricJS - Bagaimana untuk memusatkan objek Line secara menegak pada paparan semasa kanvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!