Maison > Article > interface Web > FabricJS - Comment centrer un objet Line horizontalement sur le canevas ?
FabricJS - Comment centrer un objet Line horizontalement sur le canevas ?
- WBOYavant
- 2023-09-11 10:49:02614parcourir
Dans ce tutoriel, nous allons apprendre à centrer un objet Line horizontalement sur le canevas à l'aide de FabricJS. L'élément Line est l'un des éléments de base fournis dans FabricJS. Il est utilisé pour créer des lignes droites. Étant donné que les éléments de ligne sont géométriquement unidimensionnels et ne contiennent aucun intérieur, ils ne sont jamais remplis. Nous pouvons créer un objet ligne en créant une instance fabric.Line, en spécifiant les coordonnées x et y de la ligne et en l'ajoutant au canevas. Pour centrer l'objet ligne horizontalement sur le canevas, nous utilisons la méthode centerH.
Syntaxe
centerH()
Apparence par défaut des objets Line
Exemple
Regardons un exemple de code pour voir à quoi ressemble notre objet ligne sans utiliser la méthode centerH. Dans ce cas, l’objet ligne ne sera pas centré horizontalement sur le canevas.
<!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 horizontally 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>
Utilisez la méthode centerH
Exemple
Dans cet exemple, nous verrons comment en utilisant la méthode centerH nous pouvons placer un objet ligne exactement au centre horizontal du canevas. Dans ce cas, l'objet est centré horizontalement.
<!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 centerH method</h2>
<p>
You can see that the line object has been centered horizontally 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 centerH() method to center line object horizontally
line.centerH();
</script>
</body>
</html>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!