recherche

Maison >interface Web >js tutoriel >Comment désactiver la rotation centrale d'un rectangle à l'aide de FabricJS ?

Comment désactiver la rotation centrale d'un rectangle à l'aide de FabricJS ?

王林
王林avant
2023-09-09 19:13:121203parcourir

Comment désactiver la rotation centrale dun rectangle à laide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment désactiver la rotation centrée d'un rectangle à l'aide de FabricJS. Le rectangle est l'une des différentes formes fournies par FabricJS. Afin de créer un rectangle, nous devons créer une instance de la classe Fabric.Rect et l'ajouter au canevas. Par défaut, tous les objets de FabricJS utilisent leur centre comme point de rotation. Cependant, nous pouvons modifier ce comportement en utilisant l'attribut centeredRotation.

Syntaxe

new fabric.Rect({ centeredRotation: Boolean }: Object)

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 la couleur, le curseur, la largeur du trait et d'autres propriétés de l'objet liées à l'attribut centeredRotation.

    • Touche d'option

    • centeredRotation - Cette propriété accepte une valeur Boolean, nous permettant de contrôler s'il faut utiliser le point central comme origine de transformation lorsque l'objet tourne. Sa valeur par défaut est True.

    Exemple 1

    Comportement par défaut de la rotation du rectangle dans FabricJS

    Regardons un exemple de code qui décrit le comportement par défaut d'un objet rectangle. Puisque la propriété centeredRotation est définie sur true par défaut, l'objet rectangulaire utilise son centre comme point de rotation. 
    <!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 behaviour of rotation of Rectangle in FabricJS</h2>
   <p>Click on the rectangle and rotate it. You will notice that the object rotates around its center, which is the default behaviour.</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: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
      });

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

    Exemple 2

    Passer la clé centeredRotation avec la valeur "false"

    Maintenant que nous avons vu le comportement par défaut, examinons un exemple de code pour voir ce qui se passe lorsque vous attribuez une valeur False à centeredRotation propriété. 

    <!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 centeredRotation key with the value as &ldquo;false&rdquo;</h2>
   <p>Click on the rectangle and rotate it to see the changed center of rotation</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: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
         centeredRotation: false,
      });

      // Add it to the canvas
      canvas.add(rect);
   </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!

对象 ul fabric
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment ajouter des éléments à un objet JSON en utilisant JavaScript ?Article suivant：Comment ajouter des éléments à un objet JSON en utilisant JavaScript ?

Articles Liés

Voir plus