Fabric.js 多边形cornerStrokeColor属性

在本文中，我们将看到如何使用 FabricJS 设置多边形画布上的控制角的颜色。可以通过移动和拉伸多边形画布来实现这一目的。此外，可以根据需要自定义多边形的初始笔画颜色、形状、填充颜色或笔画宽度。

为了实现这一目标，我们将使用一个叫做 FabricJS 的JavaScript库。在导入库之后，我们将在标签中创建一个包含多边形的画布块。在此之后，我们将使用 FabricJS 提供的Canvas和多边形实例，并使用 cornerStrokeColor 属性设置多边形画布上的控制角颜色，然后将多边形渲染到Canvas上，如下面的示例所示。

语法:

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

参数： 此属性接受一个参数，如上所述并描述如下：

cornerStrokeColor： 这是一个字符串，用于指定控制点的颜色。

注意： 创建多边形时，必须使用像素维度。

以下示例说明了JavaScript中的 Polygon cornerStrokeColor属性 ：

示例：

<!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 cornerStrokeColor 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 }], { 
      transparentCorners: false, 
        
      // Set the corner stroke 
      // color to red 
      cornerStrokeColor: 'red' 
    }); 
  
    // Render the polygon in canvas  
    canvas.add(polygon);  
  </script> 
</body> 
</html>

输出:

Fabric.js 多边形cornerStrokeColor属性