Fabric.js：在组中找到对象的中心（矩形）

Question

我需要找到已放置到组中的对象的中心点。 我尝试过的事情：

•getCenterPoint（）：返回中心点，就像对象位于0,0一样。

•使用组和对象的getTop（）和getLeft（）计算中心点。 不幸的是，当组值起作用时，发现对象返回负值。

•使用对象的高度/宽度计算值。 在下面列出的情况下这很接近，但这仅是因为我的示例的特性非常具体，并且不能一概而论。

下面的对象是我当前正在使用的对象，具体地说，我正在寻找rect2的中心：

        // create a rectangle object
        var rect = new fabric.Rect({
            top: 10,
            fill: 'white',
            stroke: 'black',
            width: 20,
            height: 20
        });

        // create a rectangle object
        var rect2 = new fabric.Rect({
            top: 10,
            left: 20,
            fill: 'white',
            stroke: 'black',
            width: 20,
            height: 20
        });

        var line = new fabric.Line([ 20, 20, 40, 20],
        {
            top: 0,
            left: 0,
            stroke: 'black'     
        });

        var group = new fabric.Group([ rect, rect2, line ],{
            top: 100,
            left: 100,
            hasRotatingPoint: false
        });

Answer 1

使用类似items = group._objects;东西items = group._objects;

在组的项目中运行一个循环，找到您的对象，并获取组内对象的坐标。

例如： items[i].oCoords.tr.x ，其余为数学， tr.x和br.x = center x同样找到y 。

如果要找到画布的中心， group.left执行以下操作：将group.top ， group.left添加到这些值。

Answer 2

您仍然可以在已添加到组中的对象上使用obj.getCenterPoint（）。 但是，将对象添加到组中会从原始obj引用中删除getCenterPoint方法。

如果像下面那样重新分配obj引用，则可以在每个引用上使用getCenterPoint。

var allObjs = group.getObjects(),
rect1 = allObjs[0],
rect2 = allObjs[1],
line = allObjs[2];
return rect2.getCenterPoint();

这是一个工作示例： https : //jsfiddle.net/ns9zLxeu/25/

Answer 3

这是我用来获取给定Rect中心的数学

 var x1 = e.target.oCoords.oCoords.mt.x;
 var y1 = e.target.oCoords.oCoords.mt.y;
 var x2 = e.target.oCoords.oCoords.mb.x;
 var y2 = e.target.oCoords.oCoords.mb.y;

 var centerX = (x1 + x2) / 2;
 var centerY = (y1 + y2) / 2;

然后在我的情况下，我使用中心坐标来创建一条线，方法是：

var line = makeLine([centerx, centery, 250, 175]);
canvas.add(line);