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

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

王林

Libérer： 2023-08-24 09:41:12

avant

1238 Les gens l'ont consulté

如何使用 FabricJS 设置圆的水平比例因子？

Dans ce tutoriel, nous apprendrons comment définir le facteur d'échelle horizontale 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 horizontale de l'objet circulaire. Cela peut être fait en utilisant l'attribut scaleX.

Syntaxe

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

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet< /em> qui offre 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 bien d'autres propriétés liées à l'objet dont scaleX est la propriété.

Option Key

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

Exemple 1

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

Jetons un œil au code qui affiche l'apparence d'un objet circulaire lorsque l'attribut scaleX n'est pas utilisé. Par défaut, les objets circulaires ont un facteur d'échelle horizontal de 1. scaleX détermine la transformation qui redimensionne l'objet le long de l'axe X.

<!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 horizontal scale factor of circle using FabricJS</h2>
      <p>This is the default horizontal scale factor. We have not used the <b>scaleX</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>

Copier après la connexion

Exemple 2

Passage de l'attribut scaleX comme clé

Dans cet exemple, nous transmettons l'attribut scaleX comme clé avec la valeur 2. Cela signifie que le facteur d'échelle d'un objet circulaire est doublé dans le sens horizontal.

<!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 horizontal scale factor of circle using FabricJS</h2>
      <p>Notice the horizontal scale factor of the object. Here we have set <b>scaleX</b> at 2, so the object appears stretched in the horizontal direction. </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,
            scaleX: 2,
            fill: "#85bb65"
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </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!