FabricJS - Comment centrer un objet Line horizontalement et verticalement sur le canevas ?-js tutoriel-php.cn

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

王林

Libérer： 2023-09-07 10:37:02

avant

747 Les gens l'ont consulté

FabricJS – 如何使 Line 对象在画布上水平和垂直居中？

Dans ce tutoriel, nous allons apprendre à centrer un objet Line horizontalement et verticalement 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 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 horizontalement et verticalement sur le canevas, nous utilisons la méthode center.

Grammaire

center()

Copier après la connexion

Apparence par défaut des objets Ligne

Exemple

Regardons un exemple de code pour voir à quoi ressemble notre objet ligne sans utiliser la méthode center. Dans ce cas, l’objet ligne ne sera pas centré 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</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>

Copier après la connexion

Utilisez Centre Méthode

Exemple

Dans cet exemple, nous verrons comment, en utilisant la méthode center, nous pouvons placer l'objet ligne exactement au centre du canevas. Dans ce cas, l'objet est centré horizontalement et 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 center method</h2>
   <p>You can see that the line object has been centered 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 center() to center the line object on the canvas
      line.center();
   </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!