如何使用Fabric.js设置画布圆的水平倾斜

Fabric.js Circle类使用fabric.Circle对象来提供圆形。Circle对象用于提供圆形形状，并且圆可以根据要求进行移动和拉伸。对于轮廓、颜色、宽度、高度和填充颜色，可以自定义Circle。与canvas类相比，Circle类提供了丰富的功能。

Circle类包含不同的属性，但要设置画布圆的水平倾斜，可以使用skewX属性。Fabric.js类的skewX属性指定了圆的水平倾斜。它可以用于使或设置圆为水平。

语法

以下是文本对象的语法-

fabric.Circle(radiu: number, skewX: number);

参数

radius − 用于指定圆的半径
skewX − 指定圆的水平倾斜度。

步骤

按照以下步骤使用Fabric.js来设置画布圆的水平倾斜度 –

步骤1 − 在HTML文件中引入Fabric.js库

步骤2 − 在HTML文件中创建一个新的画布元素

步骤3 − 在JavaScript代码中初始化画布元素

步骤4 − 创建一个新的Fabric.js圆类对象，并将skewX属性设置为所需的圆值

步骤5 − 将圆对象添加到画布中

示例

让我们看看如何使用fabric.js来设置画布圆的水平倾斜度 –

<html>
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
   </head>
   <body>
      <h2>Setting the Horizontal Skew of a Canvas Circle using the Fabric.js</h2>
      <p>Select the textbox to see the controlling corners.</p>
      <p>Skew of the canvas circle is set to 40.</p>
      <canvas id="skiewcanvas"></canvas>
      <script>
         var canvas = new fabric.Canvas('skiewcanvas'); 
         var circle = new fabric.Circle({
            top: 50,
            left: 50,
            radius: 100,
            skewX: 40
         }); 
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(450);
      </script> 
   </body> 
</html>

这段代码将使用指定的ID创建一个新的画布圆形元素，创建一个新的Fabric.js圆形类对象，并使用skewX属性设置圆形的水平斜率，并将圆形对象添加到画布上。圆形将以水平斜率的形式出现在画布上。

示例

让我们看一个使用setSkew方法和left、top、fill、radius、stroke和strokeWidth等属性来设置画布圆形的水平斜率的另一个示例。

<html> 
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
   </head>
   <body>
      <h2>Setting the Horizontal Skiew of a Canvas Circle</h2>
      <p>Select the textbox to see the controlling corners.</p>
      <canvas id="setskiewcanvas" width="600" height="300"></canvas>
      <script>
         var canvas = new fabric.Canvas('setskiewcanvas'); 
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            fill: "blue",
            radius: 50,
            stroke: "grey",
            strokeWidth: 5
         }); 

         canvas.add(circle);
         circle.setSkewX(40);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script> 
   </body> 
</html>

这段代码将使用指定的ID和尺寸创建一个新的画布圆形元素，创建一个新的Fabric.js Circle类对象，并使用setSkew方法将画布圆形设置为水平倾斜，并将类对象添加到画布上。在示例中，圆形将以我们定义的尺寸出现在画布上。