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[i].oCoords.tr.x 其余的是数学，tr.x和br.x = center x的中点同样找到y。

如果要查找画布的中心：将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);

Fabric.js：在组中查找对象（rect）的中心

3 个答案: