如何获取组中对象的画布相对位置?

IT技术 javascript fabricjs
2021-02-19 10:09:31

通常,对象相对于画布的位置可以从它的.left.top属性中获取,但如果对象在选择/组中,则这些位置相对于组。有没有办法获得它们相对于画布的位置?

6个回答

当对象在组内时,其相对于画布的坐标将取决于组的原点(以及对象的原点)。

假设我们有这段代码,其中有一个矩形和一个圆添加到一个组中。

var canvas = new fabric.Canvas(document.getElementById('c'));

var rect = new fabric.Rect({
    width: 100,
    height: 100,
    left: 50,
    top: 50,
    fill: 'rgba(255,0,0,0.5)'
});
var circle = new fabric.Circle({
    radius: 50,
    left: 175,
    top: 75,
    fill: '#aac'
});

var group = new fabric.Group([rect, circle],{
    originX: 'center',
    originY: 'center'
});
canvas.add(group);
canvas.renderAll();

以下是使组居中的三种可能情况:

  1. 组的原点设置为中心(如上面的代码):

    如下图所示,rect.left为我们提供了对象左侧与组中心的距离。 rect.group.left给了我们组中心到画布左侧的距离。

    所以从画布左侧的矩形距离 = rect.left + rect.group.left( http://jsfiddle.net/uue3hcj6/3/ )

    在此处输入图片说明

  2. 组的原点设置为顶部/左侧(也是默认设置)

    rect.left给了我们对象左边距组中心的距离。 rect.group.left给了我们组左侧与画布左侧的距离。现在要计算剩余距离,我们必须添加组宽度的一半。

    所以从画布左侧的矩形距离 = rect.left + rect.group.left+ rect.group.width/2( http://jsfiddle.net/uue3hcj6/6/ )

    在此处输入图片说明

  3. 组的原点设置为底部/右侧

    rect.left给了我们对象左边距组中心的距离。 rect.group.left给了我们组右侧与画布左侧的距离。现在要计算总距离,我们必须减去组宽度的一半。

    所以从画布左侧的矩形距离 = rect.left + rect.group.left- rect.group.width/2( http://jsfiddle.net/uue3hcj6/7/ )

    在此处输入图片说明

注意:对象也可能出现类似情况。

不过我有点不明白。例如,在您的第一个示例中,如果我们更改圆的左侧,并将角度添加到组中,则矩形的位置也会更改!我试图修复组内的所有对象并围绕其中心旋转组本身,但由于某种原因,所有移动的对象都不是固定的,我不知道为什么。
2021-04-20 10:09:31
终于有人解释了fabricjs的所有“魔法”,谢谢。
2021-04-27 10:09:31
那么嵌套组呢?......我们必须发明自己的自行车,这是一种罕见的功能吗?:|
2021-05-20 10:09:31

就像对Swapnil Jain 的回答补充一样,top属性也是如此。

所以:

absoluteLeft = rect.left + rect.group.left - rect.group.width / 2
absoluteTop = rect.top + rect.group.top - rect.group.height / 2

解决方案是考虑组宽度。object.left相对于集团的中心,而不是它的左侧,因此,我们采取group.width/2

var canvas = new fabric.Canvas(document.getElementById('c'));

var rect = new fabric.Rect({
    width: 100,
    height: 100,
    left: 50,
    top: 50,
    fill: 'rgba(255,0,0,0.5)'
});
var circle = new fabric.Circle({
    radius: 50,
    left: 150,
    top: 75,
    fill: '#aac'
});


canvas.add(rect);
canvas.add(circle);
canvas.renderAll();

function getPOS(){
    var group = canvas.getActiveGroup();
    if (group == null) {
        var pos = rect.left;
    }
    else {
        var pos = rect.group.left + rect.group.width/2 + rect.left;
    }
    alert("Position of rect from left:"+pos);
}

不得不用另一种方法解决这个问题……我不得不在 JSON 画布数据中找到图像,所以我的代码是:

let findItemByType = function(source, type, rX, rY)
{
    rX = rX ? rX : 0;
    rY = rY ? rY : 0;
    let objs = [];
    source.forEach(function(item){
        if (item.type === type){
            item.rX = rX + item.left;
            item.rY = rY + item.top;
            objs.push(item);
        }
        else {
            if (item.objects)
            {
                item.rX = rX;
                item.rY = rY;
                let subresult = findItemByType(item.objects, 
                type, 
                item.rX + item.left + item.width / 2, 
                item.rY + item.top + item.height / 2);
                if (subresult){
                    objs = objs.concat(subresult);
                }
            }   
        }
    });
    return objs;
}
let images = findItemByType(canvas.toJSON().objects, "image", 0, 0);

此代码应包含所有图像对象的数组,并且它们应具有 rX 和 rY 属性,即图像的相对位置。

一种不需要判断originX originY 属性的方法。

const groupCenter = rect.group.getPointByOrigin('center', 'center');
absoluteLeft = rect.left + rect.group.left;
absoluteTop = rect.top + rect.group.top;