Comment désactiver la rotation centrale d'un cercle à l'aide de FabricJS ?-js tutoriel-php.cn

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

PHPz

Libérer： 2023-08-31 11:21:06

avant

875 Les gens l'ont consulté

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

Dans ce tutoriel, nous apprendrons comment désactiver la rotation centrale 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. 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.Circle({ centeredRotation: Boolean }: 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 la couleur, le curseur, la largeur du trait et d'autres propriétés de l'objet liées à l'attribut centeredRotation.

Option Key

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

Exemple 1

Comportement par défaut de la rotation > Cercle dans FabricJS

Regardons un exemple décrivant le comportement par défaut d'un objet circulaire. Puisque la propriété centeredRotation est définie sur True par défaut, l'objet circulaire 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>Disabling the centered rotation of circle using FabricJs</h2>
      <p>Select the object and rotate it by holding its controlling corner at the top. The circle will rotate around its center. It is the default behavior. Here we have not used the <b>centeredRotation</b> property but it is by default set to True. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
         });

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

Copier après la connexion

Exemple 2

Passer la clé centeredRotation avec la valeur "false"

Maintenant que nous avons vu le comportement par défaut, regardons un morceau de code pour comprendre ce qui se passe lorsque l'attribut centeredRotation est spécifié comme FAUX .

<!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>Disabling the centered rotation of circle using FabricJs</h2>
      <p>Select the object and rotate it by holding its controlling corner at the top. Now the circle will not rotate around its cente because we have used the <b>centeredRotation</b> property and set it False. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            centeredRotation: false
         });

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