Maison >interface Web >js tutoriel >Comment désactiver la mise à l'échelle centrée d'un cercle à l'aide de FabricJS ?

Comment désactiver la mise à l'échelle centrée d'un cercle à l'aide de FabricJS ?

WBOYavant: 2023-09-07 17:13:021456parcourir

如何使用 FabricJS 禁用 Circle 的居中缩放？

Dans ce tutoriel, nous apprendrons comment désactiver la mise à l'échelle centrée 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. Lors de la mise à l'échelle par un contrôle, attribuez une valeur vraie à la propriété centeredScaling, en utilisant le centre comme origine de transformation de l'objet.

Syntaxe

new fabric.Circle({ centeredScaling: Boolean }: Object)

Paramètres

Options (facultatif) - Ce paramètre est un objet qui offre une personnalisation supplémentaire à notre cercle. 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 à la propriété centeredScaling

touche d'option

centeredScaling - Cette propriété accepte un boolean强> valeur. Lorsque cette propriété est Vrai, l'objet utilise le centre comme origine de transformation.

Exemple 1

Passer centeredScaling comme clé et lui attribuer une "vraie" valeur

Regardons un morceau de code pour voir comment un objet rond se comporte lorsque centeredScaling

em > La propriété est activée. Lorsque l'on zoome sur un objet, l'origine de la transformation est le centre du cercle.

<!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 scaling of circle using FabricJs</h2>
      <p>Select the object and stretch it by holding one of its controlling corners. You will notice the circle scales up uniformly from its center. This is the default behavior. Here we have not used the <b>centeredScaling</b> property but by default, it is 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",
            centeredScaling: true
         });

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

Exemple 2

Désactivation de la propriété centeredScaling

Nous pouvons désactiver la propriété centeredScaling en lui spécifiant une fausse valeur. Cela forcera le cercle à ne plus utiliser le centre du cercle comme centre de la transformation. Voici un code pour le prouver

<!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 scaling of circle using FabricJs</h2>
      <p>Select the object and stretch it by holding one of its controlling corners. You will notice that the circle is no longer scaling up uniformly from its center. Here we have used the <b>centeredScaling</b> property and set it False. </p>
      <canvas id="canvas"></canvas>

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

         // Adding it to the canvas
         canvas.add(circle);
         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 annuler l'exécution d'une animation dans Line à l'aide de FabricJS ?Article suivant：Comment annuler l'exécution d'une animation dans Line à l'aide de FabricJS ?

Articles Liés

Voir plus