Fabric.js ActiveSelection setObjectsCoords() 方法

setObjectsCoords() 方法是 Fabric.js ActiveSelection(活动选择)的一个函数，它可以将选中的多个对象同时设置坐标。在进行多选操作时，选中多个对象后，我们可能需要将它们同时移动或拖拽等操作，而 setObjectsCoords() 方法就可以帮助我们实现这个功能。

语法

setObjectsCoords([{
        tl: {
            x: Number,
            y: Number
        },
        tr: {
            x: Number,
            y: Number
        },
        br: {
            x: Number,
            y: Number
        },
        bl: {
            x: Number,
            y: Number
        }
    }], {
        width: Number,
        height: Number
    })

参数说明：

• coords：图形对象的四个点的坐标。
• size：大小参数。

示例

var canvas = new fabric.Canvas('canvas');
var rect1 = new fabric.Rect({
    left: 100,
    top: 100,
    width: 100,
    height: 100,
    fill: 'red'
});
var rect2 = new fabric.Rect({
    left: 200,
    top: 200,
    width: 100,
    height: 100,
    fill: 'blue'
});

canvas.add(rect1, rect2);
canvas.setActiveObject(rect1);

var currentCoords = rect1.oCoords;
var newTop = currentCoords.tl.y + 50;

canvas.setActiveObject(new fabric.ActiveSelection(canvas.getObjects()));

canvas.getActiveObject().setObjectsCoords([{
    tl: {
        x: currentCoords.tl.x,
        y: newTop
    },
    tr: {
        x: currentCoords.tr.x,
        y: newTop
    },
    br: {
        x: currentCoords.br.x,
        y: newTop + rect1.height
    },
    bl: {
        x: currentCoords.bl.x,
        y: newTop + rect1.height
    }
}], {
    width: rect1.width,
    height: rect1.height
});
canvas.renderAll();

总结

setObjectsCoords() 方法是非常实用的方法，可以方便地同时移动或拖拽多个对象。通过本文的介绍，您已经了解了该方法的具体用法和参数说明。希望本文能够帮助您更好地使用 Fabric.js 进行开发。