Home > Article > Web Front-end > How to set the X-axis tilt angle of a circle using FabricJS?

How to set the X-axis tilt angle of a circle using FabricJS?

WBOYforward: 2023-09-10 19:41:02859browse

如何使用 FabricJS 设置圆的 X 轴倾斜角度？

In this tutorial, we will learn how to set the X-axis tilt angle of a circle using FabricJS. Circles are one of the various shapes provided by FabricJS. To create a circle, we will create an instance of the fabric.Circle class and add it to the canvas. Our circle object can be customized in many ways, such as changing its dimensions, adding a background color, or by changing the tilt angle on the X-axis. We can do this by using the skewX property.

Syntax

new fabric.Circle({ skewX : Number }: 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 skewX is the attribute, such as color, cursor, stroke width, and many other properties.

Option Key

skewX - This property accepts numbers , determine the tilt angle of the object on the X-axis.

Example 1

>When skewX attribute is not applied

Let us see an example to understand when skewX is not applied properties of how our circular object is displayed. In this case, our circular object will not be distorted at any angle.

<!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>Setting the angle of skew on X-axis of circle using FabricJS</h2>
      <p>Here we have not applied the <b>skewX</b> property, hence there is no distortion in the object. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 50,
            top: 90,
            radius: 50,
            fill: "#ccccff",
            stroke: "#7b68ee",
            strokeWidth: 5
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Example 2

Pass skewX as the key and assign it a custom value.

In this example, we will see how to assign the numerical value of the skewX attribute. The value passed will determine the twist along the X-axis. Since we have assigned a value of 30 to the skewX property, the effect is as if the circular object was pinched horizontally to create a 30-degree angle.

<!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>Setting the angle of skew on X-axis of circle using FabricJS</h2>
      <p>Observe that the object is skewed on the X-axis in the clockwise direction at an angle of 30 degrees, as we have set <b>skewX</b> at 30. </p>
      <canvas id="canvas"></canvas>
     
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 50,
            top: 90,
            radius: 50,
            fill: "#ccccff",
            stroke: "#7b68ee",
            strokeWidth: 5,
            skewX: 30
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

The above is the detailed content of How to set the X-axis tilt angle of a circle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

对象 fabric

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：JavaScript program to generate all rotations of numbersNext article：JavaScript program to generate all rotations of numbers

See more