search

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

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

WBOY
WBOYforward
2023-08-30 12:09:041379browse

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

Parameters

  • Options (optional) - This parameter is a Object 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.

    • ul>

    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.

    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>

    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>

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!

对象
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to make synchronous HTTP requests in JavaScript?Next article：How to make synchronous HTTP requests in JavaScript?

Related articles

See more