如何找到多边形Fabric.js的偏移量

Question

我正在用线制作多边形。

   x = options.e.pageX - offset.left;
   y = options.e.pageY - offset.top;

点击后，我捕捉鼠标位置。之后，我将这一点添加到点数组中。

roofPoints.push(new Point(x, y));

function Point(x, y) {
    this.x = x;
    this.y = y;
}

设置所有点后，我这样做：

var roof = new fabric.Polyline(roofPoints, { fill : 'purple', });

这个问题是，当我设置点时，我正在绘制多边形的线条，如下所示：

var points = [ x, y, x, y ];
        lines.push(new fabric.Line(points, {
            strokeWidth : 1,
            selectable : false,
            stroke : 'red'
        }).setOriginX(x).setOriginY(y));

所以基本上我正在制作一个多边形的计数器，当我完成绘制计数器时，我只是创建一个多边形。但问题是，当我创建多边形时，它不适合计数器，它只是远离计数器。我试图找到如何正确抵消它。

roof.set({ left : left, top : top, });

我试图获得多边形的边界矩形的左上角并设置它以使其正确放置。但那不行。这看起来如何

小提琴How it looks

Answer 1

好的，所以我检查了创建多边形的坐标，看到它以某种方式重新计算了它们，这就是它被偏移的原因。例如：

  

PointBefore   58 | 193   PointAfter   -189 | -52

这是它改变的方式，所以为了做出正确的偏移，我所做的就是在创建多边形之前得到它，并在创建之后设置顶部和左边。

 var left = findLeftPaddingForRoof(roofPoints);
    var top = findTopPaddingForRoof(roofPoints);
    var roof = new fabric.Polyline(roofPoints, {
        fill: 'purple'
    });
    roof.set({
        left: left,
        top: top
    });


    return roof; 

和fiddle that works。

Answer 2

此脚本不适用于1.4.13和1.5.0 fabricjs版本。无法确认普通版本。

编辑：修复了问题，也在以后的版本中修复：

改变这个：

var points = [ x, y, x, y ];
    lines.push(new fabric.Line(points, {
        strokeWidth : 1,
        selectable : false,
        stroke : 'red'
    }).setOriginX(x).setOriginY(y));

进入这个：

 var points = [ x, y, x, y ];
    lines.push(new fabric.Line(points, {
        strokeWidth : 1,
        selectable : false,
        stroke : 'red'
    }));