How to lock the horizontal tilt of Ellipse using FabricJS?-JS Tutorial-php.cn

How to lock the horizontal tilt of Ellipse using FabricJS?

PHPz

Release： 2023-09-14 12:49:02

forward

844 people have browsed it

如何使用 FabricJS 锁定 Ellipse 的水平倾斜？

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)

Copy after login

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 Valuevalue. If we give it a "true" value, the object's horizontal tilt will be locked.

Example 1
Default Behavior Ellipse in Canvas Objects
Let’s go through an example to learn about the default behavior of the Ellipse object when the
lockSkewingX 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>  <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>
Copy after login
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>  <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>
Copy after login
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!