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

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

王林

Libérer： 2023-09-17 09:25:02

avant

1132 Les gens l'ont consulté

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

Dans ce tutoriel, nous apprendrons comment désactiver le Zoom centré d'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. Lors de la mise à l'échelle via un contrôle, attribuez à la propriété centeredScaling la valeur "true" pour utiliser le centre comme origine de transformation de l'objet.

Syntaxe

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

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet< /em> 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 centeredScaling.

Option Key

centeredScaling - Cette propriété accepte une valeur booléenne. 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 valeur "vraie"

L'exemple suivant montre comment un objet ellipse se comporte lorsque la propriété centeredScaling est activée. Lorsque l'on zoome sur un objet, l'origine de la transformation est le centre de l'ellipse.

<!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 scaling of Ellipse using FabricJS?</h2>
      <p>Select the object and stretch it from its corners. The ellipse will scale up from 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",
            centeredScaling: true,
         });

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

Copier après la connexion

Exemple 2

Désactivation de l'attribut centeredScaling

Nous pouvons désactiver l'attribut centeredScaling en lui attribuant la valeur "false". Cela n'utilisera plus le centre de l'ellipse comme centre de la transformation. Voici un code pour démonstration -

<!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 scaling of Ellipse using FabricJS?</h2>
      <p>Select the object and stretch it from its corners. You will notice the object scales up but not from its center because we have set <b>centeredScaling</b> as 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: "",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            centeredScaling: false,
         });

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