如何使用 FabricJS 使圆形不可见?

fabricjsjavascripthtml5 canvas更新于 2025/2/4 9:48:17

在本教程中，我们将学习如何使用 FabricJS 使圆形不可见。圆形是 FabricJS 提供的各种形状之一。为了创建一个圆形，我们必须创建一个 fabric.Circle 类的实例并将其添加到画布中。我们的圆形对象可以通过各种方式进行自定义，例如更改其尺寸、添加背景颜色或使其可见或不可见。我们可以通过使用 visible 属性来实现这一点。

语法

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

参数

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

选项键

visible − 此属性接受布尔值，该值允许我们将对象渲染到画布上。其默认值为 True。

示例 1

将 visible 属性作为键传递，值为 'true'

让我们看一段代码来了解当我们将 visible 属性传递给 True 值时会发生什么。通过将值分配为 'true'我们确保我们的 Circle 对象被渲染到画布上。这也是 FabricJS 中的默认行为。

<!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>visible</b> 设置为 True。这是默认行为。因此，即使我们不应用 <b>visible</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",
            visible: true
         });

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

示例 2

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

在此示例中，我们将 visible 属性作为键传递，值为 False。分配 false 值将确保我们的圆形对象不会渲染到画布上。它不会使对象"不可见"，而是将其完全消除。它可用于从画布中删除对象，而无需删除其代码。

<!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>visible</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",
            visible: false
         });
   
         // 将其添加到画布
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>