Home > Article > Web Front-end > How to lock the horizontal tilt of Ellipse using FabricJS?
How to lock the horizontal tilt of Ellipse using FabricJS?
- PHPzforward
- 2023-09-14 12:49:02755browse
In this tutorial, we will learn how to lock the horizontal tilt of an ellipse using FabricJS. Just as we can specify the position, color, opacity, and size of the elliptical object in the canvas, we can also specify whether we want to stop tilting the object horizontally. This can be done using the lockSkewingX property.
Syntax
new fabric.Ellipse({ lockSkewingX : Boolean }: Object)Parameters
Options(optional) - This parameter is a provided Additional custom objects to our ellipse. Using this parameter, you can change the color, cursor, stroke width, and many other properties associated with the object for which lockSkewingX is the property.
Option Key
##lockSkewingX - This property accepts a Boolean Value强>value. If we give it a "true" value, the object's horizontal tilt will be locked.
Default Behavior Ellipse in Canvas Objects
Let’s go through an example to learn about the default behavior of the Ellipse object when thelockSkewingX property is not used. You can tilt an object horizontally and vertically by holding down the Shift key and 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 horizontal skewing of Ellipse using FabricJS</h2>
<p>Select the object. Hold the "shift" and try to stretch the object (not diagonally). You can skew the object both horizontally and vertically. This is the default behavior.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 115,
top: 50,
fill: "white",
rx: 80,
ry: 50,
stroke: "black",
strokeWidth: 5,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Example 2
Passing lockSkewingX as a key with a value of "true"
In this example we You'll learn how you can use the lockSkewingX property to stop an Ellipse object's ability to tilt horizontally. While we can tilt an ellipse object vertically, we are not allowed to do the same operation horizontally.<!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>How to lock the horizontal skewing of Ellipse using FabricJS?</h2>
<p>Select the object; hold the "shift" key and try to stretch the object horizontally. You cannot skew the object horizontally because we have set <b>lockSkewingX</b> to True. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 115,
top: 50,
fill: "white",
rx: 80,
ry: 50,
stroke: "black",
strokeWidth: 5,
lockSkewingX: true,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>The above is the detailed content of How to lock the horizontal tilt of Ellipse using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!