Maison > Article > interface Web > Comment verrouiller la rotation d'un triangle à l'aide de FabricJS ?

Comment verrouiller la rotation d'un triangle à l'aide de FabricJS ?

王林avant: 2023-09-18 13:21:10687parcourir

如何使用 FabricJS 锁定三角形的旋转？

Dans ce tutoriel, nous allons apprendre à verrouiller la rotation d'un triangle à l'aide de FabricJS. Tout comme nous pouvons spécifier la position, la couleur, l'opacité et la taille d'un objet triangulaire dans le canevas, nous pouvons également spécifier s'il subit une rotation. Cela peut être fait en utilisant l'attribut lockRotation.

Syntaxe

new fabric.Triangle({ lockRotation : 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 lockRotation.

Option Key

lockRotation - Cette propriété accepte une valeur Boolean. Si on lui donne une valeur "vrai", la rotation de l'objet sera verrouillée.

Exemple 1

Comportement par défaut des objets triangulaires dans le canevas

Regardons un exemple de code pour comprendre le comportement par défaut des objets triangulaires lorsque l'attribut lockRotation n'est pas utilisé. Par défaut, nous pouvons faire pivoter les objets triangulaires dans le sens inverse des aiguilles d'une montre ou dans le sens des aiguilles d'une montre.

<!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>Default behaviour of a Triangle object in the canvas</h2>
   <p>You can select triangle and try rotating it to see the default behavior.</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: 70,
         width: 90,
         height: 80,
         fill: "#746cc0",
         stroke: "#967bb6",
         strokeWidth: 5,
      });

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

Exemple 2

Passer lockRotation comme clé avec une valeur de "true"

Dans cet exemple, nous verrons comment utiliser la propriété lockRotation pour avoir la possibilité d'empêcher un objet triangulaire de tourner. Comme nous pouvons le voir, dès que nous essayons de faire pivoter l'objet triangle, le curseur non autorisé s'affiche. Cela signifie que les opérations de rotation ne sont plus autorisées.

<!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 lockRotation as key with &#39;true&#39; value</h2>
   <p>You can see that you are no longer allowed to rotate the triangle.</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: 70,
         width: 90,
         height: 80,
         fill: "#746cc0",
         stroke: "#967bb6",
         strokeWidth: 5,
         lockRotation: true,
      });

      // 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

Déclaration：

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

Article précédent：Créer des modules personnalisés dans Node.jsArticle suivant：Créer des modules personnalisés dans Node.js

Articles Liés

Voir plus