Rumah > Artikel > hujung hadapan web > FabricJS - Bagaimana untuk memusatkan objek Line secara menegak pada kanvas?
FabricJS - Bagaimana untuk memusatkan objek Line secara menegak pada kanvas?
- PHPzke hadapan
- 2023-09-03 15:17:02982semak imbas
Dalam tutorial ini, kita akan belajar cara menegak garis tengah pada 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 garis dengan mencipta contoh fabric.Line, menyatakan koordinat x dan y garisan dan menambahkannya pada kanvas. Untuk memusatkan objek garis secara menegak pada kanvas, kami menggunakan kaedah centerV.
Syntax
centerV()
Kemunculan lalai bagi objek Baris
Contoh
#🎜🎜 untuk lihat kod apa yang perlu dilihat jika objek garisan kita kelihatan seperti apabila menggunakan kaedahcenterV. 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 has not been centered vertically on the 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: 20,
});
// Add it to the canvas
canvas.add(line);
</script>
</body>
</html>
Gunakan centerVkaedah
ContohDalam contoh ini kita akan melihat bagaimana dengan menggunakan kaedah
centerV kita dapat meletakkan objek garis tepat di tengah menegak kanvas. Dalam kes ini, objek dipusatkan secara menegak.
<!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 centerV method</h2>
<p>
You can see that the line object has been centered vertically on the 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: 20,
});
// Add it to the canvas
canvas.add(line);
// Using the centerV() method to center line object vertically
line.centerV();
</script>
</body>
</html>
Atas ialah kandungan terperinci FabricJS - Bagaimana untuk memusatkan objek Line secara menegak pada kanvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!