In this tutorial, we will learn how to lock the vertical tilt of a circle using FabricJS. Just as we can specify the position, color, opacity, and size of a circular object in the canvas, we can also specify whether we want to stop tilting the object vertically. This can be done using the lockSkewingY property.
new fabric.Circle({ lockSkewingY : Boolean }: Object)Options (optional) - This parameter is a Object< /em> Provides additional customization for our circles. Using this parameter, you can change properties related to the object for which lockSkewingY is an attribute, such as color, cursor, stroke width, and many other properties.
##lockSkewingY - This property accepts a Boolean value value. If we give it a "true" value, the object's vertical tilt will be locked. < /strong>
#Default behavior of a Circle object in canvas
Let's look at a code example to understand The default behavior of Circle objects when the lockSkewingY property is not used. You can tilt an object horizontally and vertically by pressing theshift key and then dragging horizontally or vertically.
<!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>Locking the vertical skewing of a circle using FabricJS</h2>
<p>Select the object, hold the <b>shift</b> key, and stretch it horizontally or vertically. The object will get skewed freely. This is the default behavior. Here we have not applied the <b>lockSkewingY</b> property, but by default, it is set to False. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
fill: "white",
radius: 50,
stroke: "black",
strokeWidth: 5
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Pass lockSkewingY as key with "true" value
In this example we will see how to stop the circle The ability to vertically tilt an object using the lockSkewingY property. As we can see, while we can tilt a circular object horizontally by pressing theShift key, we are not allowed to do the same vertically.
<!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>Locking the vertical skewing of a circle using FabricJS</h2>
<p>Select the object, hold the <b>shift</b> key, and try to stretch the circle horizontally or vertically. You will notice that the object gets skewed horizontally, but its vertical skewing is locked. Here we have set <b>lockSkewingY</b> to True. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
fill: "white",
radius: 50,
stroke: "black",
strokeWidth: 5,
lockSkewingY: true
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>The above is the detailed content of How to lock the vertical tilt of a circle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!
What to do if the login token is invalid
Virtual mobile phone number to receive verification code
How to change ip address in linux
How to generate bin file using mdk
How to solve disk parameter errors
Domestic Bitcoin buying and selling platform
How to open xml file
How to format hard drive in linux
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
