Comment définir l'angle d'inclinaison de l'axe Y d'un rectangle à l'aide de FabricJS ?-js tutoriel-php.cn

Comment définir l'angle d'inclinaison de l'axe Y d'un rectangle à l'aide de FabricJS ?

WBOY

Libérer： 2023-09-09 21:33:03

avant

1273 Les gens l'ont consulté

如何使用 FabricJS 设置矩形 Y 轴的倾斜角度？

Dans ce tutoriel, nous apprendrons comment définir l'angle d'inclinaison sur l'axe y Rectangle utilisant FabricJS. Le rectangle est l'une des différentes formes proposées par TissuJS. Afin de créer un rectangle, nous devons créer une instance fabric.Rect classe et ajoutez-le à la toile.

Notre objet rectangulaire peut être personnalisé de nombreuses manières, comme par exemple en changeant ses dimensions, Ajoutez une couleur d'arrière-plan ou modifiez l'angle d'inclinaison sur l'axe Y. ce que nous pouvons faire Ceci est réalisé en utilisant l'attribut skewY.

Syntaxe

new fabric.Rect({ skewY : Number }: Object)

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre rectangle. À l'aide de ce paramètre, vous pouvez modifier des propriétés telles que la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés associées à l'objet pour lequel skewY est l'attribut.

Option Key

skewY - Cette propriété accepte un numéro qui détermine l'angle l'inclinaison de l'objet sur l'axe y.

Exemple 1

Lorsque la propriété skewY n'est pas appliquée

Regardons un exemple de code pour voir comment notre objet rectangulaire s'affiche lorsque la propriété skewY n'est pas appliquée. Dans ce cas, nous n'aurons aucun angle d'inclinaison dans notre objet rectangulaire.

<!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>When the skewY property is not applied</h2>
   <p>You can see there is no skew by any angle on the rectangle by default</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 rectangle object
      var rect = new fabric.Rect({
         left: 105,
         top: 70,
         width: 170,
         height: 70,
         fill: "#8f9779",
         stroke: "#8fbc8f",
         strokeWidth: 9,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Copier après la connexion

Exemple 2

Passez skewY comme clé et attribuez-lui une valeur personnalisée.

Dans cet exemple, nous verrons comment attribuer la valeur numérique de skewY propriété. La valeur transmise déterminera l’inclinaison le long de l’axe Y.

<!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>Passing skewY as key and assigning a custom value to it</h2>
   <p>You can see the rectangle has been skewed by 30 degrees along the Yaxis</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 rectangle object
      var rect = new fabric.Rect({
         left: 105,
         top: 70,
         width: 170,
         height: 70,
         fill: "#8f9779",
         stroke: "#8fbc8f",
         strokeWidth: 9,
         skewY: 30,
      });

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