Maison >interface Web >js tutoriel >FabricJS - Comment centrer verticalement un objet Line sur le canevas ?

FabricJS - Comment centrer verticalement un objet Line sur le canevas ?

PHPzavant: 2023-09-03 15:17:021057parcourir

FabricJS – 如何将 Line 对象在画布上垂直居中？

Dans ce tutoriel, nous allons apprendre à centrer verticalement une ligne sur un 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 de 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 verticalement sur le canevas, nous utilisons la méthode centerV.

Syntaxe

 centerV()

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 centerV. Dans ce cas, l’objet ligne ne sera pas centré verticalement 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 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>

Utilisez la méthode centerV

Exemple

Dans cet exemple, nous verrons comment en utilisant la méthode centerV nous pouvons placer un objet ligne exactement au centre vertical du canevas. Dans ce cas, l'objet est centré verticalement.

<!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>

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment définir la largeur de la bordure de la zone de sélection sur le canevas à l'aide de FabricJS ?Article suivant：Comment définir la largeur de la bordure de la zone de sélection sur le canevas à l'aide de FabricJS ?

Articles Liés

Voir plus