Maison >interface Web >js tutoriel >Comment désactiver la mise à l'échelle centrale des triangles à l'aide de FabricJS ?

Comment désactiver la mise à l'échelle centrale des triangles à l'aide de FabricJS ?

WBOYavant: 2023-09-15 15:33:081155parcourir

如何使用 FabricJS 禁用三角形的中心缩放？

Dans ce tutoriel, nous apprendrons comment désactiver la mise à l'échelle centrée d'un triangle à l'aide de FabricJS. Triangle est l'une des différentes formes fournies par FabricJS. Afin de créer un triangle, nous devons créer une instance de la classe Fabric.Triangle et l'ajouter au canevas.

Lors de la mise à l'échelle d'un objet via un contrôle, attribuez une vraie valeur à la propriété centeredScaling, et l'origine de la transformation est son centre.

Syntaxe

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

Paramètres

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

Option Key

centeredScaling - Cette propriété accepte une valeur boolean et nous permet de contrôler si l'objet doit utiliser son centre comme origine de transformation.

Exemple 1

Passez centeredScaling comme clé et attribuez-lui une "vraie" valeur

Regardons un exemple de code pour comprendre comment un objet triangle 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 du triangle.

<!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>Passing centeredScaling as key and assigning it a "true" value</h2>
   <p>Try scaling the triangle to see that it is using its center as the center of transformation.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a triangle object
      var triangle = new fabric.Triangle({
         left: 105,
         top: 60,
         width: 100,
         height: 70,
         fill: "#5f9ea0",
         centeredScaling: true,
      });

      // Add it to the canvas
      canvas.add(triangle);
   </script>
</body>
</html>

Exemple 2

Désactivation de l'attribut centeredScaling

Nous pouvons désactiver l'attribut centeredScaling en lui attribuant une valeur False. Cela n'utilisera plus le centre du triangle comme centre de la transformation. Voici un exemple de code pour démontrer

<!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 centeredScaling property</h2>
   <p>Try scaling the triangle to see that it is using one of its corners as the center of transformation.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a triangle object
      var triangle = new fabric.Triangle({
         left: 105,
         top: 60,
         width: 100,
         height: 70,
         fill: "#5f9ea0",
      centeredScaling: false,
      });

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

对象 ul fabric

Déclaration：

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

Article précédent：Comment changer la langue des pages en utilisant JavaScript ?Article suivant：Comment changer la langue des pages en utilisant JavaScript ?

Articles Liés

Voir plus