fabricjs - How to get polygon points in Fabric.js

Question

I am drawing polygon by capturing mouse clicks on canvas and then passing these points to fabric.Polygon. So, in this manner I'm drawing multiple polygons.

What I need know is, I want to get the mouse co-ordinates (pixel points on canvas) for the polygon which is selected now?

I have tried with:

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

But this is giving some negative and some positive values.

So, can u please tell me a way to find out the polygon points?

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 时才有效（否则也需要“旋转”点坐标）。

Answer 2

看起来从 2.0 版开始，他们改变了多边形的坐标。2.0 之前的点相对于多边形的中心；在 2.0 之后，它们对画布是绝对的；

查看我对类似问题的回答https://stackoverflow.com/a/53710375/4681279