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

Comment définir l'angle d'inclinaison d'un cercle sur l'axe X à l'aide de FabricJS ?

WBOY

Libérer： 2023-09-10 19:41:02

avant

858 Les gens l'ont consulté

如何使用 FabricJS 设置圆的 X 轴倾斜角度？

Dans ce tutoriel, nous apprendrons comment définir l'angle d'inclinaison de l'axe X d'un cercle à l'aide de FabricJS. Les cercles sont l'une des différentes formes fournies par FabricJS. Pour créer un cercle, nous allons créer une instance de la classe fabric.Circle et l'ajouter au canevas. Notre objet cercle peut être personnalisé de plusieurs manières, par exemple en modifiant ses dimensions, en ajoutant une couleur d'arrière-plan ou en modifiant l'angle d'inclinaison sur l'axe X. Nous pouvons le faire en utilisant l'attribut skewX.

Syntaxe

new fabric.Circle({ skewX : 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 les propriétés liées à l'objet dont skewX est un attribut, telles que la couleur, le curseur, la largeur du trait et bien d'autres propriétés.

Option Key

skewX - Cette propriété accepte un number qui détermine l'angle d'inclinaison sur l'axe X de l'objet.

Exemple 1

>Lorsque la propriété skewX n'est pas appliquée

Regardons un exemple pour voir comment notre objet circulaire apparaît lorsque la propriété skewX n'est pas appliquée. Dans ce cas, notre objet circulaire ne sera déformé sous aucun angle.

<!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 angle of skew on X-axis of circle using FabricJS</h2>
      <p>Here we have not applied the <b>skewX</b> property, hence there is no distortion in the object. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 50,
            top: 90,
            radius: 50,
            fill: "#ccccff",
            stroke: "#7b68ee",
            strokeWidth: 5
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Copier après la connexion

Exemple 2

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

Dans cet exemple, nous verrons comment attribuer la valeur numérique de la propriété skewX. La valeur transmise déterminera la torsion le long de l’axe X. Puisque nous avons attribué à la propriété skewX une valeur de 30, l'effet est comme si l'objet circulaire était pincé horizontalement pour créer un angle de 30 degrés.

<!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 angle of skew on X-axis of circle using FabricJS</h2>
      <p>Observe that the object is skewed on the X-axis in the clockwise direction at an angle of 30 degrees, as we have set <b>skewX</b> at 30. </p>
      <canvas id="canvas"></canvas>
     
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 50,
            top: 90,
            radius: 50,
            fill: "#ccccff",
            stroke: "#7b68ee",
            strokeWidth: 5,
            skewX: 30
         });
         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!