Maison > Article > interface Web > Comment définir le facteur d'échelle vertical d'une ellipse à l'aide de FabricJS ?

Comment définir le facteur d'échelle vertical d'une ellipse à l'aide de FabricJS ?

PHPzavant: 2023-08-25 21:09:07584parcourir

如何使用 FabricJS 设置椭圆的垂直比例因子？

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

Syntaxe

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

Paramètres

Options (facultatif) - Ce paramètre est un Objet offrant une personnalisation supplémentaire à notre ellipse. En utilisant ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur du trait et bien d'autres propriétés liées à l'objet dont scaleY est la propriété.

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é

L'exemple suivant montre comment une ellipse apparaît lorsque l'attribut scaleY n'est pas utilisé. Par défaut, les objets ellipses 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 an Ellipse using FabricJS</h2>
      <p>Note that here we haven&#39;t set the vertical scale factor <b>scaleY</b> explicitly. By default, it is set to 1. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#ff1493",
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Exemple 2

Passage de l'attribut scaleY comme clé

Dans cet exemple, nous transmettons l'attribut scaleY comme clé avec la valeur 2. Cela signifie que le facteur d'échelle de l'objet ellipse 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 an Ellipse using FabricJS</h2>
      <p>Here we have set <b>scaleY</b> to 2, so the vertical scale factor of the ellipse doubled. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#ff1493",
            scaleY: 2,
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         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：Comment accéder à un objet contenant des espaces dans la clé de l'objet à l'aide de JavaScript ?Article suivant：Comment accéder à un objet contenant des espaces dans la clé de l'objet à l'aide de JavaScript ?

Articles Liés

Voir plus