如何使用 FabricJS 使 Circle 的控制角透明?

fabricjsjavascripthtml5 canvas更新于 2025/2/4 10:20:17

在本教程中，我们将学习如何使用 FabricJS 使 Circle 的控制角透明。Circle 是 FabricJS 提供的各种形状之一。为了创建一个圆圈，我们将创建一个 fabric.Circle 类的实例并将其添加到画布中。transparentCorners 属性允许我们使 Circle 的控制角透明。

语法

new fabric.Circle( { transparentCorners: Boolean }: Object)

参数

选项(可选) − 此参数是一个 Object，它为我们的圆圈提供额外的自定义。使用此参数，可以更改与具有 transparentCorners 属性的对象相关的属性(例如颜色、光标、笔触宽度和许多其他属性)。

选项键

transparentCorners − 此属性接受布尔值，该值允许我们将对象的控制角渲染为透明。其默认值为 True。

示例 1

将 transparentCorners 属性作为键传递，值为 'false'

让我们看一个代码示例，创建一个控制角不透明的圆形对象。为了实现这一点，我们需要向 transparentCorners 属性传递一个 False 值。

<!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>使用 FabricJS 使圆的控制角透明</h2>
      <p>选择对象并观察其控制角。这里我们将 <b>transparentCorners</b> 设置为 False。</p>
      <canvas id="canvas"></canvas>

      <script>
         // 启动一个canvas实例
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "#adff2f",
            radius: 50,
            stroke: "#228b22",
            transparentCorners: false
         });

         // 将其添加到画布
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

示例 2

将 transparentCorners 作为键传递，值为 'true'

在此示例中，我们向 transparentCorners 属性传递一个 True 值。这将确保控制角呈现为透明。请注意，这也是默认行为。

<!DOCTYPE html>
<html>
   <head>
      <!-- 添加 Fabric JS 库-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
   </head>

   <body>
      <h2>使用 FabricJS 使圆的控制角透明</h2>
      <p>选择对象并观察其控制角。这里我们将 <b>transparentCorners</b> 设置为 True，因此角是透明的。</p>
      <canvas id="canvas"></canvas>

      <script>
         // 启动一个canvas实例
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "#adff2f",
            radius: 50,
            stroke: "#228b22",
            transparentCorners: true
         });

         // 将其添加到画布
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>