fabric Polygon多边形

说明

用法与 fabric Polyline折线 类似 ,但图形是 闭合的,即:起点自动连接终点

fabric.Polygon(points: Array, options: Object)

参数解释:

  • points:这个参数接受一个 数组 ,表示构成折线对象的点的数组。
  • options(可选):这个参数是一个对象,为我们的对象提供额外的定制。使用这个参数可以改变多段线对象的原点、笔画宽度和其他许多相关属性。

例子

<canvas id="canvas"></canvas>

<script>

  // Initiate a canvas instance
  var canvas = new fabric.Canvas("canvas");
  canvas.setWidth(document.body.scrollWidth);
  canvas.setHeight(250);

  // Initiating a points array
  var points = [
     { x: 200, y: 150 },
     { x: 0, y: 100 },
     { x: 100, y: 0 },
     { x: 200, y: 100 },
  ];

  // Initiating a polyline object
  var polyline = new fabric.Polyline(points, {
     left: 100,
     top: 40,
     fill: "white",
     strokeWidth: 4,
     stroke: "green",
  });

  // Adding it to the canvas
  canvas.add(polyline);
</script>

参考:
https://geek-docs.com/fabricjs/fabricjs-tutorials/t_how-a-polygon-is-different-from-a-polyline-in-fabricjs.html