Comment désactiver la mise à l'échelle centrée d'un cercle à l'aide de FabricJS ?-js tutoriel-php.cn

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

WBOY

Libérer： 2023-09-07 17:13:02

avant

1433 Les gens l'ont consulté

如何使用 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)

Copier après la connexion

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>

Copier après la connexion

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>

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!