如何在Fabric.js中获取多边形顶点

Question

我通过在画布上捕获鼠标点击事件，并将这些点传递给 fabric.Polygon 来绘制多边形。

现在，我需要知道的是，我想获取当前选定的多边形的鼠标坐标（画布上的像素点）？

我已经尝试过：

canvas.getActiveObject().get('points');

但这会产生一些负值和一些正值。

那么，请告诉我一种找出多边形顶点的方法好吗？

- Nitesh Vudutha

Answer 1

多边形的点是相对于其中心的，因此您可以像这样获取它们的“绝对”位置：

var polygon = canvas.getActiveObject();

var polygonCenter = polygon.getCenterPoint();

var translatedPoints = polygon.get('points').map(function(p) {
  return { 
    x: polygonCenter.x + p.x, 
    y: polygonCenter.y + p.y
  };
});

让我们检查一下这个的样子：

translatedPoints.forEach(function(p) {
  canvas.getContext().strokeRect(p.x-5, p.y-5, 10, 10);
});

我认为只有当多边形的角度为0时，这个方法才能奏效（否则还需要“旋转”点的坐标）。

- kangax

---

非常感谢您，这确实帮助我进一步推进我的项目。 - Nitesh Vudutha

@NiteshVudutha 当然可以。如果有帮助，请接受答案。 - kangax

@kangax - 感谢您的回答，它很有帮助。当多边形被旋转时，有没有一种方法可以获取正确的坐标？ - vmachan

最新版本的Fabric JS中，这个已经不再起作用了 - 是否有更新？ - Jimmery

如果您创建一个新的多边形，可能会发生点不是相对于中心而是绝对的情况。（在v2.4.1版本中测试过） 具有讽刺意味的是，导出并重新导入可以将其更改为相对点。 - line-o

Answer 2

从2.0版本开始，多边形的坐标发生了变化。在2.0之前，点是相对于多边形中心的；而在2.0之后，它们是相对于画布的绝对坐标。

请查看我对类似问题的回答https://dev59.com/KJnga4cB1Zd3GeqPfe7V#53710375

- Vitalii Bratok