FabricJS - Comment centrer un objet Line horizontalement sur la fenêtre actuelle du canevas ?-js tutoriel-php.cn

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

WBOY

Libérer： 2023-09-01 13:41:02

avant

1375 Les gens l'ont consulté

FabricJS – 如何将 Line 对象水平居中在画布的当前视口上？

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

Grammaire

viewportCenterH(): fabric.Object

Copier après la connexion

Apparence par défaut des objets Ligne

Exemple

Regardons un exemple de code pour voir à quoi ressemble un objet Line sans utiliser la méthode viewportCenterH. Dans ce cas, l’objet Line 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 is not centered horizontally 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>

Copier après la connexion

Utilisez la méthode viewportCenterH

Exemple

Regardons un exemple de code pour voir à quoi ressemble un objet ligne lors de l'utilisation de la méthode viewportCenterH. Dans ce cas, notre objet ligne sera centré horizontalement 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 viewportCenterH method</h2>
   <p>
      You can see that the line object is centered horizontally 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 viewportCenterH method
      line.viewportCenterH();
   </script>
</body>
</html>

Copier après la connexion

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!