无法为画布上的选定对象获取正确的坐标

Question

例如，让我们创建两个矩形。 然后我们选中这两个矩形，想看看它们的坐标：

var greyBox = new fabric.Rect({
    left:100,
    top:100,
    fill: 'grey',
    width: 100,
    height: 100
});

var redBox = new fabric.Rect({
    left:300,
    top:300,
    fill: 'red',
    width: 100,
    height: 100
});

function createCanvas(id){
    canvas = new fabric.Canvas(id);
    canvas.add(greyBox);
    canvas.add(redBox);

    canvas.on('selection:created', function(e) {
        const activeSelection = e.target;

        console.log(activeSelection._objects[0].left);
        console.log(activeSelection._objects[1].left);
    });

    return canvas;
} 

我们确切地知道他们的左边是 100 和 300。 但相反，我们看到的是：-150 和 49：

我们如何获得正确的坐标？

Answer 1

要在组或多选中查找对象的位置属性，您可以使用calcTransformMatrix() 方法。

var matrix = activeSelection._objects[0].calcTransformMatrix();
var options = fabric.util.qrDecompose(matrix);
console.log(options.translateX, options.translateY);

选项对象将具有您需要的转换后的值。请参阅http://fabricjs.com/using-transformations 以更好地了解 transformMatrix 系统。