search

Home >Web Front-end >JS Tutorial >How to lock the horizontal tilt of Ellipse using FabricJS?

How to lock the horizontal tilt of Ellipse using FabricJS?

PHPz
PHPzforward
2023-09-14 12:49:02824browse

如何使用 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)

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.

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>
      <!-- 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!

对象
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：FabricJS - How to center a Line object vertically on the current viewport of the canvas?Next article：FabricJS - How to center a Line object vertically on the current viewport of the canvas?

Related articles

See more