Maison >interface Web >js tutoriel >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:02705parcourir

FabricJS – 如何将 Line 对象在画布上水平居中？

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!

对象 fabric

Déclaration：

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

Article précédent：Comment puis-je afficher le div de chargement de la page jusqu'à ce que la page soit chargée ?Article suivant：Comment puis-je afficher le div de chargement de la page jusqu'à ce que la page soit chargée ?

Articles Liés

Voir plus