recherche

Maison >interface Web >js tutoriel >FabricJS - Comment centrer un objet Line verticalement sur la fenêtre actuelle du canevas ?

FabricJS - Comment centrer un objet Line verticalement sur la fenêtre actuelle du canevas ?

WBOY
WBOYavant
2023-09-14 12:41:091952parcourir

FabricJS – 如何使 Line 对象在画布的当前视口上垂直居中？

Dans ce tutoriel, nous allons apprendre à centrer verticalement un objet Line sur la fenêtre actuelle du 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 Line verticalement sur la fenêtre actuelle du canevas, nous utilisons la méthode viewportCenterV.

Syntaxe

 viewportCenterV(): fabric.Object

Apparence par défaut des objets Line

Exemple

Regardons un exemple de code pour voir à quoi ressemble notre objet Line sans utiliser la méthode viewportCenterV. 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 is not centered vertically with respect to the current viewport of 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: 6,
      });
      
      // Add it to the canvas
      canvas.add(line);
   </script>
</body>
</html>

Utilisez la méthode viewportCenterV

Exemple

Regardons un exemple de code pour voir quand Utilisez la méthode viewportCenterV. Dans ce cas, notre objet ligne sera centré verticalement Par rapport à la fenêtre actuelle du 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>Using the viewportCenterV method</h2>
   <p>
      You can see that the line object is centered vertically with respect to the current viewport of 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: 6,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the viewportCenterV method
      line.viewportCenterV();
   </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：Tests Javascript automatisés avec Mocha.jsArticle suivant：Tests Javascript automatisés avec Mocha.js

Articles Liés

Voir plus