FabricJS - Comment définir la position d'un objet Line par rapport à l'origine ?-js tutoriel-php.cn

FabricJS - Comment définir la position d'un objet Line par rapport à l'origine ?

王林

Libérer： 2023-08-25 12:13:08

avant

1403 Les gens l'ont consulté

FabricJS – 如何设置 Line 对象相对于原点的位置？

Dans ce tutoriel, nous allons apprendre à définir la position d'un objet Line par rapport à l'origine à 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 définir la position d'un objet Line par rapport à l'origine, nous utilisons la méthode setPositionByOrigin.

Grammaire

setPositionByOrigin(pos: fabric.Point, originX: String, originY: String): void

Copier après la connexion

Paramètres

pos - Cette propriété accepte une valeur fabric.Point qui nous permet de définir la nouvelle position de l'objet. < /p>
originX - Cette propriété accepte une valeur String qui nous permet de définir l'origine horizontale. Les valeurs possibles sont « gauche », « centre » ou « droite ».
originY - Cette propriété accepte une valeur String qui nous permet de définir l'origine verticale. Les valeurs possibles sont "Top", "Center" ou "Bottom".

N'utilisez pas la position par défaut de la méthode setPositionByOrigin

Exemple

Regardons un exemple de code pour voir la position par défaut d'un objet Line sans utiliser la méthode setPositionByOrigin.

<!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 position without using the setPositionByOrigin method </h2>
   <p>You can see the default position of the line object</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 la méthode setPositionByOrigin

Exemple

Regardons un exemple de code pour voir à quoi ressemble un objet Line lors de l'utilisation de la méthode setPositionByOrigin. Dans cet exemple, nous spécifions la nouvelle position de l'objet en initialisant un objet Point avec des coordonnées x et y de 500 et 100 respectivement. Nous allons définir la nouvelle position de l'objet ligne, en considérant son origine horizontale comme le « centre » et son origine verticale comme le « haut ».

<!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 setPositionByOrigin method</h2>
   <p>You can see the new position of the line object</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,
      });

      // Initiate a Point object
      var pos = new fabric.Point(500, 100);

      // Using setPositionByOrigin method
      line.setPositionByOrigin(pos, "center", "top");

      // Add it to the canvas
      canvas.add(line);
   </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!