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

How to lock the vertical tilt of Ellipse using FabricJS?

王林
Release: 2023-09-01 15:05:10
forward
729 people have browsed it

如何使用 FabricJS 锁定 Ellipse 的垂直倾斜?

In this tutorial, we will learn how to lock the vertical 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 vertically. This can be done using the lockSkewingY property.

Syntax

new fabric.Ellipse({ lockSkewingY : Boolean }: Object)
Copy after login

Parameters

  • Options (optional) - This parameter is a Object< /em> Provides additional customization for our ellipse. Using this parameter, you can change the color, cursor, stroke width, and many other properties associated with the object for which lockSkewingY is the property.

Option Key

  • ##lockSkewingY - This property accepts a Boolean Valuevalue. If we give it a "true" value, the object's vertical tilt will be locked.

Example 1

Default Behavior Ellipse Object in Canvas

Let's look at an example to understand the unused

lockSkewingY property is the default behavior of the Ellipse object. You can tilt an object horizontally and vertically by pressing the shift 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>How to lock the vertical skewing of Ellipse using FabricJS?</h2>
      <p>Select the object and stretch it horizontally or vertically by pressing the <b>shift</b> key. The object will get skewed. This is the default behavior. Here we have not applied the <b>lockSkewing</b> property. </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 lockSkewingY as a key with a value of "true"

In this example we We'll see how we can use the lockSkewingY property to stop the ability of an ellipse object to tilt vertically. While we can tilt an ellipse object horizontally, we are not allowed to do the same operation 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>How to lock the vertical skewing of Ellipse using FabricJS?</h2>
      <p>Select the object and stretch it horizontally by pressing the <b>shift</b> key. The object will get skewed. But we have locked its vertical skewing by applying the <b>lockSkewingY</b> property. </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,
            lockSkewingY: 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 vertical tilt of Ellipse using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

source:tutorialspoint.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template