Comment verrouiller la rotation d'un triangle à l'aide de FabricJS ?-js tutoriel-php.cn

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

王林

Libérer： 2023-09-18 13:21:10

avant

716 Les gens l'ont consulté

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

Copier après la connexion

Paramètres

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

< /ul>
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>  <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>
Copier après la connexion
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>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Passing lockRotation as key with 'true' 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>
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!