Maison > Article > interface Web > Comment verrouiller la rotation d'un rectangle avec FabricJS ?
Comment verrouiller la rotation d'un rectangle avec FabricJS ?
- 王林avant
- 2023-08-24 19:29:081192parcourir
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!