多边形上的边界线

Question

我正在尝试围绕多边形画线，它应该从一个点到下一个点绘制不同颜色的线，我卡在将线附加到多边形的最后一个点上，还有正在创建的红色圆圈在多边形角上成功，使用鼠标移动框时正在绘制线，使用 'modified' 事件

问题在这里：

var lastPoint = (i=>polygon.points.length)?0:i+1;
var fromX = transformedPoints[lastPoint].x;
var fromY = transformedPoints[lastPoint].y;
  return new fabric.Line([p.x, p.y, 25, fromX],{

JS代码

var canvas = new fabric.Canvas("c", {
  selection: false
});

var polygon = new fabric.Polygon([
  new fabric.Point(150, 50),
  new fabric.Point(250, 50),
  new fabric.Point(250, 150),
  new fabric.Point(150, 150)
]);

polygon.on("modified", function() {
  document.getElementById("p").innerHTML = JSON.stringify(this);
  var matrix = this.calcTransformMatrix();
  var transformedPoints = this.get("points")
    .map(function(p) {
      return new fabric.Point(
        p.x - polygon.pathOffset.x,
        p.y - polygon.pathOffset.y);
    })
    .map(function(p) {
      return fabric.util.transformPoint(p, matrix);
    });
  var circles = transformedPoints.map(function(p) {
    return new fabric.Circle({
      left: p.x,
      top: p.y,
      radius: 3,
      fill: "red",
      originX: "center",
      originY: "center",
      hasControls: false,
      hasBorders: false,
      selectable: false
    });
  });
  document.getElementById("l").innerHTML = JSON.stringify(transformedPoints);
  var colors = ['#E5097F', '#00A0E3', '#009846', '#FECC00', '#000', '#000', '#000'];
  var lines = transformedPoints.map(function(p, i) {
    document.getElementById("r").innerHTML = JSON.stringify(p);
    var lastPoint = (i => polygon.points.length) ? 0 : i + 1;
    var fromX = transformedPoints[lastPoint].x;
    var fromY = transformedPoints[lastPoint].y;
    document.getElementById("r").innerHTML = fromX + ' - > ' + fromY;
    return new fabric.Line([p.x, p.y, 25, fromX], {
      stroke: colors[i],
      strokeWidth: 10,
      hasBorders: false,
      strokeDashArray: [8, 13]
    });
  });
  side_a = new fabric.Line([150, 0, 50, 0], {
    stroke: "red",
    strokeWidth: 10,
    hasBorders: false
  });
  this.canvas.clear().add(this).add(side_a).add.apply(this.canvas, lines).add.apply(this.canvas, circles).setActiveObject(this).renderAll();
});

canvas.add(polygon).renderAll();

更新：

我可以通过提供静态值来生成这些行，以供演示。在 'modified' 事件发生之前，我在它应该去的地方包含了一些行：

side_a = new fabric.Line([250, 50, 150, 50], {
  stroke: "red",
  strokeWidth: 10,
  hasBorders: false
});
side_b = new fabric.Line([150, 150, 150, 50], {
  stroke: "green",
  strokeWidth: 10,
  hasBorders: false
});
side_c = new fabric.Line([250, 150, 250, 50], {
  stroke: "blue",
  strokeWidth: 10,
  hasBorders: false
});
side_d = new fabric.Line([150, 150, 260, 150], {
  stroke: "green",
  strokeWidth: 10,
  hasBorders: false
});
canvas.add(polygon).add(side_a).add(side_b).add(side_c).add(side_d).renderAll();

现在只需要弄清楚如何动态创建它们。 new JSFIDDLE HERE

更新：最后我能够通过运行循环解决它。

Answer 1

我能够通过点循环而不是生成线来解决它：

var fromX = transformedPoints[i].x;
var fromY = transformedPoints[i].y;
return new fabric.Line([p.x, p.y , fromX, fromY], {
  stroke: colors[i],
  strokeWidth: 10,
  hasBorders: true,
  strokeDashArray: [20, 5]
});

多边形上的边界线

border lines on polygon

javascript

fabricjs