Maison >interface Web >js tutoriel >Comment définir le facteur d'échelle verticale d'un cercle à l'aide de FabricJS ?

Comment définir le facteur d'échelle verticale d'un cercle à l'aide de FabricJS ?

WBOYavant: 2023-09-01 10:57:071413parcourir

Comment définir le facteur déchelle verticale dun cercle à laide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment définir le facteur d'échelle verticale d'un cercle à l'aide de FabricJS. Les cercles sont l'une des différentes formes fournies par FabricJS. Afin de créer un cercle, nous devons créer une instance de la classe Fabric.Circle et l'ajouter au canevas. Tout comme nous pouvons spécifier la position, la couleur, l'opacité et la taille d'un objet circulaire dans le canevas, nous pouvons également définir l'échelle verticale de l'objet circulaire. Cela peut être fait en utilisant l'attribut scaleY.

Syntaxe

new fabric.Circle({ scaleY : Number }: Object)

Paramètres

Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire pour nos cercles. 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. La valeur par défaut est 1.

Exemple 1

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

Regardons un exemple qui montre l'apparence d'un objet circulaire lorsque l'attribut scaleY n'est pas utilisé. Par défaut, les objets circulaires ont un facteur d'échelle verticale de 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>Setting the vertical scale factor of a Circle using FabricJS</h2>
      <p>Notice the vertical scale factor of the circle. Here we have not used the <b>scaleY</b> property, but by default, it is set to 1. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            padding: 7,
            radius: 50,
            fill: "#85bb65"
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Exemple 2

Passer scaleY property comme clé

Dans cet exemple, nous passons scaleY property comme clé avec la valeur 2. Cela signifie que le facteur d'échelle des objets circulaires dans la direction verticale est doublé.

<!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>Setting the vertical scale factor of a Circle using FabricJS</h2>
      <p>Notice the vertical scale factor of the circle. Here we have set <b>scaleY</b> at 2, so the object appears elongated on the Y-axis. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            padding: 7,
            radius: 50,
            fill: "#85bb65",
            scaleY: 2
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Propriétés du prototype de chaîne JavaScriptArticle suivant：Propriétés du prototype de chaîne JavaScript

Articles Liés

Voir plus