如何在 Fabric.js 中设置相对于画布圆形顶部的位 置？

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

Circle 类包含不同的属性，但是可以通过 top 属性来设置相对于画布圆形顶部的位 置。Fabric.js 类的 top 属性指定了相对于圆形顶部的位 置。它可以用来创建或设置圆形相对于顶部的位 置。top 属性用于指定或设置圆形的垂直位 置，该位 置相对于画布顶部。

语法

以下是圆形对象的语法：

fabric.Circle(radius: number, top: number);

参数

以下是用于设置相对于画布圆形顶部的位 置的两个参数：

  • 半径 (radius) - 用于指定圆形的半径

  • 顶部 (top) - 指定顶部边缘的相对距离

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

步骤

按照以下步骤使用 Fabric.js 设置相对于画布圆形顶部的位 置：

步骤 1 - 在 HTML 文件中包含 Fabric.js 库

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

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

步骤 4 - 创建一个新的 Fabric.js Circle 类对象并将 top 属性设置为所需的圆形值

步骤 5 - top 属性用于将画布圆形指定到顶部边缘

步骤 6 - 将圆形对象添加到画布

示例

让我们看看如何使用 fabric.js 设置相对于画布圆形顶部的位 置：

Open Compiler
<html> 
   <head> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
   </head> 
   <body> 
      <h2>Setting the position relative to top of a canvas circle using the Fabric.js</h2>
      <p>You can select the textbox to see the controlling corners.</p>
      <p>The position relative to top is set to 60.</p>
      <canvas id="positiontopcanvas"></canvas>
      <script> 
         var canvas = new fabric.Canvas('positiontopcanvas'); 
         var circle4 = new fabric.Circle( {
              radius: 70,
            top: 60
         }); 
         canvas.add(circle4);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(500);
      </script> 
   </body> 
</html>

此代码将创建一个具有指定 ID 的新圆形画布元素，创建一个新的 Fabric.js 类 Circle 对象，并使用 top 属性设置相对于画布圆形顶部的位 置，并将圆形对象添加到画布。在这里，我们将顶部 x 坐标定义为距画布圆形顶部边缘 60 像素。

示例

让我们看看另一个示例，其中我们可以使用 top 属性以及 top、radius、stroke 和 fill 等参数来设置相对于画布圆形顶部的位 置。

Open Compiler
<html>
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
   </head>
   <body>
      <h2>Setting the position relative to top of a canvas circle</h2>
      <p>You can select the textbox to see the controlling corners.</p>
      <p>The position realtive to top is set to 50.</p>
      <canvas id="topcanvas"></canvas>
      <script>
         var canvas = new fabric.Canvas('topcanvas'); 
         var circle5 = new fabric.Circle({
            fill: 'red',
            stroke: 'blue',
            radius: 70,
            top: 50
         }); 

         canvas.add(circle5);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(400);
      </script> 
   </body> 
</html>

此代码将创建一个具有指定 ID 和尺寸的新圆形画布元素，创建一个新的 Fabric.js 类 Circle 对象，并使用 top 属性设置相对于画布圆形顶部的位 置，并将圆形类对象添加到画布。圆形将以我们在示例中定义的尺寸显示在画布上。

top 属性用于设置圆形相对于画布顶部的垂直位 置。另一方面，left 属性用于设置圆形相对于画布左侧的水平位 置。

结论

在本文中，我们演示了如何设置相对于画布圆形顶部的位 置以及示例。我们在这里看到了两个不同的示例，我们使用了 top 属性来设置相对于画布圆形顶部的位 置。在第一个示例中，我们使用“top”属性将其设置为相对于画布圆形顶部的位 置。对于第二个示例，我们使用了 top 属性和各种尺寸参数（如 top、fill、radius 和 stroke）来设置相对于顶部的位 置。

更新于：2023年2月24日

浏览量：377

启动你的职业生涯

完成课程获得认证

开始学习
广告