Home > Article > Web Front-end > How to lock the rotation of a rectangle using FabricJS?
How to lock the rotation of a rectangle using FabricJS?
- 王林forward
- 2023-08-24 19:29:081192browse
In this tutorial, we will learn how to lock the rotation of a rectangle using FabricJS. Just as we can specify the position, color, opacity, and dimensions of a rectangular object within the canvas, we can also specify whether it is rotated. This can be done using the lockRotation attribute.
Syntax
new fabric.Rect({ lockRotation : Boolean }: Object)Parameters
Options (optional) - This parameter is a ## that provides additional customization #Object to our rectangle. Using this parameter, you can change properties such as color, cursor, stroke width, and many other properties related to the object for which lockRotation is an attribute.
lockRotation - This property accepts a Boolean value. If we give it a "true" value, the object rotation will be locked.
Default behavior of rectangle objects in canvas
Let's look at a code example to understand how The default behavior of rectangular objects when using the lockRotation property. By default, we can rotate a rectangular object counterclockwise or clockwise.<!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>Example 2
Pass lockRotation as key with True value
In this example we will see how to stop the function usage of rectangle lockRotation property to rotate the object. As we can see, as soon as we try to rotate the rectangular object, the cursor is displayed which is not allowed. This means that rotation operations are no longer allowed.<!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>The above is the detailed content of How to lock the rotation of a rectangle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!