Fabric.js多边形透明角属性

在本文中，我们将看到如何使用 FabricJS 来设置画布多边形角的可见性。画布意味着多边形可以移动并根据需求进行拉伸。此外，多边形可以在初始描边颜色、填充颜色、描边宽度或形状方面进行自定义。

为了实现这一点，我们将使用一个叫做 FabricJS 的JavaScript库。在使用CDN导入库之后，我们将在标签中创建一个包含多边形的画布块。然后，我们将分别使用FabricJS提供的Canvas和多边形实例来设置多边形角的可见性，使用 transparentCorners 属性，并按照下面的示例在画布上渲染多边形。

语法：

fabric.Polygon([
      { x: pixel, y: pixel },
      { x: pixel, y: pixel },
      { x: pixel, y: pixel },
      { x: pixel, y: pixel },
      { x: pixel, y: pixel }],
      {
            cornerStrokeColor: string,
            transparentCorner: boolean
      }
)

参数: 此属性接受两个参数，如上所述并下面进行描述：

cornerStrokeColor: 这是一个字符串，指定控制点的描边颜色。
transparentCorner: 这是一个布尔值，指定是否使控制点可见。

注意: 使用像素来创建多边形是必需的。

以下示例说明了 Polygon transparentCorner 属性 在JavaScript中的使用:

示例1： 这里禁用了transparentCorner属性。

HTML

<!DOCTYPE html> 
<html> 
<head> 
  <!-- Loading the FabricJS library -->
  <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"> 
  </script> 
</head> 
<body> 
  <div style="text-align: center; 
              width: 600px;"> 
    <h1 style="color: green;"> 
      GeeksforGeeks 
    </h1> 
    <b> 
      Fabric.js | Polygon transparentCorners Property 
    </b> 
  </div> 
  <canvas id="canvas" width="600" height="300"
          style="border:1px solid #000000;"> 
  </canvas> 
  
  <script> 
  
    // Initiate a Canvas instance  
    var canvas = new fabric.Canvas("canvas"); 
  
    // Initiate a polygon instance  
    var polygon = new fabric.Polygon([ 
      { x: 295, y: 10 }, 
      { x: 235, y: 198 }, 
      { x: 385, y: 78 }, 
      { x: 205, y: 78 }, 
      { x: 355, y: 198 }], { 
      strokeWidth: 3, 
      cornerStrokeColor: 'red', 
  
      // Specify if the controlling  
      // corners are transparent 
      transparentCorners: false 
    }); 
  
    // Render the polygon in canvas  
    canvas.add(polygon);  
  </script> 
</body> 
</html>

输出：
Output:
Fabric.js多边形透明角属性

示例2: 这里启用了transparentCorner属性。

HTML

<!DOCTYPE html> 
<html> 
<head> 
  <!-- Loading the FabricJS library -->
  <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"> 
  </script> 
</head> 
<body> 
  <div style="text-align: center; 
              width: 600px;"> 
    <h1 style="color: green;"> 
      GeeksforGeeks 
    </h1> 
    <b> 
      Fabric.js | Polygon transparentCorners Property 
    </b> 
  </div> 
  <canvas id="canvas" width="600" height="300"
          style="border:1px solid #000000;"> 
  </canvas> 
  
  <script> 
  
    // Initiate a Canvas instance  
    var canvas = new fabric.Canvas("canvas"); 
  
    // Initiate a polygon instance  
    var polygon = new fabric.Polygon([ 
      { x: 295, y: 10 }, 
      { x: 235, y: 198 }, 
      { x: 385, y: 78 }, 
      { x: 205, y: 78 }, 
      { x: 355, y: 198 }], { 
      strokeWidth: 3, 
      cornerStrokeColor: 'red', 
  
      // Specify if the controlling  
      // corners are transparent 
      transparentCorners: true 
    }); 
  
    // Render the polygon in canvas  
    canvas.add(polygon);  
  </script> 
</body> 
</html>

输出：

Fabric.js多边形透明角属性