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

Question

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

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 系统。

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

Can't get proper coordinates for selected objects on canvas

fabricjs