Rumah >hujung hadapan web >tutorial js >FabricJS - Bagaimana untuk memusatkan objek Line secara menegak pada kanvas?
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.
centerV()
centerV. 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
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!