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

How to lock the vertical tilt of a circle using FabricJS?

WBOY
Release: 2023-08-30 12:09:04
forward
1395 people have browsed it

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

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.

Syntax

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

Parameters

  • 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.

  • Option Key

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

    Example 1

    #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 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>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>
    Copy after login

    Example 2

    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 the

    Shift 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>
    Copy after login

    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!

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