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

Fabric.js的Circle类是通过使用fabric.Circle对象来提供圆的形状。Circle对象用来提供圆的形状，圆是可移动的，它可以根据要求进行拉伸。对于笔画、颜色、宽度、高度和填充颜色，Circle是可定制的。与canvas类相比，Circle类提供了丰富的功能。

Circle类包含了不同的属性，但是要设置一个canvas圆的水平倾斜可以使用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方法和左、上、填充、半径、笔画和笔画宽度等属性来设置画布圆的水平倾斜。

<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方法将画布圆形设置为水平倾斜，并将该类对象添加到画布上。圆圈将出现在画布上，其尺寸与我们在例子中定义的一样。

总结

在这篇文章中，我们通过实例演示了如何设置画布圆的水平倾斜。我们在这里看到了两个不同的例子，我们使用skewX属性和setSkew方法来设置画布的水平倾斜。在第一个例子中，我们使用’skewX’属性将其改为水平倾斜。在第二个例子中，我们使用setSkew( )方法和各种尺寸参数，如左、顶、填充等，来设置圆的水平倾斜。