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

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

WBOYavant: 2023-08-28 09:13:111135parcourir

如何使用 FabricJS 禁用椭圆的居中旋转？

Dans ce tutoriel, nous apprendrons comment désactiver la rotation centrée 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. 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.Ellipse({ centeredRotation: Boolean }: 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 de nombreuses autres propriétés de l'objet liées à l'attribut centeredRotation.

Option Key

centeredRotation - Cette propriété accepte une valeur Boolean em> qui nous permet de contrôler si l'objet utilise son point central comme origine de transformation lors d'une rotation via le contrôle. Sa valeur par défaut est True.

Exemple 1

Comportement par défaut de la rotation de l'ellipse dans FabricJS strong>

Voyons un exemple décrivant le comportement par défaut d'un objet ellipse. Puisque la propriété centeredRotation est définie sur "true" par défaut, l'objet ellipse 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>How to disable the centered rotation of Ellipse using FabricJS?</h2>
      <p>Select the object and rotate it. The ellipse will by default rotate around its center. This is the default behavior.</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: 215,
            top: 100,
            fill: "white",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
         });

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

Exemple 2

Passer la clé centeredRotation avec la valeur "false"

Maintenant que nous avons vu le comportement par défaut, examinons le code pour comprendre ce qui se passe lorsque la propriété centeredRotation reçoit la valeur " FAUX" . Ici l'ellipse n'utilise plus le centre de l'ellipse comme origine de rotation, mais utilise l'un de ses côté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>How to disable the centered rotation of Ellipse using FabricJS?</h2>
      <p>Select the object and try to rotate it. The ellipse will not rotate around its center because we have set <b>centeredRotation</b> to False. </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: 215,
            top: 100,
            fill: "white",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            centeredRotation: false,
         });

         // 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!

对象 fabric

Déclaration：

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

Article précédent：Comment utiliser des variables comme clés dans les littéraux d'objet JavaScript ?Article suivant：Comment utiliser des variables comme clés dans les littéraux d'objet JavaScript ?

Articles Liés

Voir plus