Maison >interface Web >js tutoriel >Comment verrouiller la rotation d'un rectangle avec FabricJS ?

Comment verrouiller la rotation d'un rectangle avec FabricJS ?

王林avant: 2023-08-24 19:29:081272parcourir

Comment verrouiller la rotation dun rectangle avec FabricJS ?

Dans ce tutoriel, nous allons apprendre à verrouiller la rotation d'un rectangle à l'aide de FabricJS. Tout comme nous pouvons spécifier la position, la couleur, l'opacité et les dimensions d'un objet rectangulaire 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.Rect({ lockRotation : Boolean }: Object)

Paramètres

Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre rectangle. À l'aide de ce paramètre, vous pouvez modifier des propriétés telles que la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés liées à l'objet pour lequel lockRotation est un attribut.

Option Key

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

Exemple 1

Comportement par défaut des objets rectangle dans Canvas

Regardons un exemple de code pour comprendre le comportement par défaut d'un objet rectangle lorsque vous n'utilisez pas la propriété lockRotation. Par défaut, nous pouvons faire pivoter un objet rectangulaire 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 Rectangle object in the canvas</h2>
   <p>You can try rotating the rectangle to see the default behaviour</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 rectangle object
      var rect = new fabric.Rect({
         left: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: "black",
         padding: 9,
         stroke: "#483d8b",
         strokeWidth: 5,
      });

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

Exemple 2

Passer lockRotation en tant que clé avec la valeur True

Dans cet exemple, nous verrons comment empêcher la fonctionnalité d'un objet rectangulaire de tourner à l'aide de la propriété lockRotation. Comme on peut le voir, dès que l'on essaie de faire pivoter l'objet rectangulaire, le curseur s'affiche, ce qui n'est pas autorisé. 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 a True value</h2>
   <p>Try rotating the object and you will see a not-allowed cursor on the rotate handle</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 rectangle object
      var rect = new fabric.Rect({
         left: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: "black",
         padding: 9,
         stroke: "#483d8b",
         strokeWidth: 5,
         lockRotation: true,
      });

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

对象

Déclaration：

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

Article précédent：Comment centrer un objet Image dans la fenêtre actuelle du canevas à l'aide de FabricJS ?Article suivant：Comment centrer un objet Image dans la fenêtre actuelle du canevas à l'aide de FabricJS ?

Articles Liés

Voir plus