Comment définir le facteur d'échelle vertical d'un rectangle à l'aide de FabricJS ?-js tutoriel-php.cn

Comment définir le facteur d'échelle vertical d'un rectangle à l'aide de FabricJS ?

王林

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

avant

1402 Les gens l'ont consulté

Comment définir le facteur déchelle vertical dun rectangle à laide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment définir le facteur d'échelle verticale d'un rectangle Utilisez FabricJS. Le rectangle est l'une des différentes formes fournies par FabricJS. pour Pour créer un rectangle, nous devons créer une instance de la classe Fabric.Rect et l'ajouter à la toile.

Tout comme nous pouvons spécifier la position, la couleur, l'opacité et la taille de l'objet rectangulaire Dans le canevas, nous pouvons également définir l’échelle verticale de l’objet rectangulaire. cela peut être fait En utilisant l'attribut scaleY.

Syntaxe

new fabric.Rect({ scaleY : 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. En utilisant 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 liées à l'objet avec scaleY comme attribut.

Option Key

scaleY - Cette propriété accepte une valeur numérique. La valeur attribuée détermine le facteur d'échelle vertical de l'objet. Sa valeur par défaut est 1.

Exemple 1

Apparence par défaut lorsque scaleY n'est pas utilisé

Regardons un exemple de code lorsque L'attribut scaleY n'est pas utilisé. Par défaut, le facteur d'échelle vertical d'un objet rectangulaire est 1.scaleY détermine la transformation qui redimensionne l'objet 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>Default appearance when scaleY is not used</h2>
   <p>You can see that there is no scaling along the Y-axis</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: "#dcdcdc",
         stroke: "#696969",
         strokeWidth: 5,
      });

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

Copier après la connexion

Exemple 2

Passer l'attribut scaleY comme clé

Dans cet exemple, nous transmettons l'attribut scaleY comme clé avec la valeur 2. ce Indique que le facteur d'échelle de l'objet rectangulaire est doublé dans la direction verticale.

<!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 scaleY property as key</h2>
   <p>You can see that the object&rsquo;s height has been doubled</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: "#dcdcdc",
         stroke: "#696969",
         strokeWidth: 5,
         scaleY: 2,
      });

      // 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!