如何左对齐组中的对象

Question

我是 fabric js 的新手。我试图通过使用此功能将组中的所有对象左对齐。

$rootScope.alignLeft = function () {
    var activeObject = canvas.pages[canvas.activePageIndex].fabric.getActiveObject();
    if (activeObject.type == "group") {
        var items = activeObject._objects;
        var left = activeObject.getLeft();
        var top = activeObject.getTop();
        console.log(activeObject);
        canvas.pages[canvas.activePageIndex].fabric.remove(activeObject);
        console.log(left);
        console.log(top);
        for (var i = 0; i < items.length; i++) {
            canvas.pages[canvas.activePageIndex].fabric.add(items[i].set({left: activeObject.left}));
        }

        canvas.pages[canvas.activePageIndex].fabric.renderAll();
    }
};

我面临的问题是

1) 如果我不使用 .remove(activeGroup)，它会复制组中的对象。我想保留 activeGroup 并以某种方式阻止它自我复制。

2) items[i].set({left : activeObject.left} 正确设置了左对齐，但对象的顶部值发生了变化，我不希望这样。我曾尝试使用 items[i].set({left : activeObject.left,top:activeObject.top}); 但没能保持不变。

我怎样才能实现这个功能？

Answer 1

我是如何解决这些问题的。我相信未来像我这样的 fabricjs 新手会像我一样面临这些基本的概念性问题。

第 1 点和第 2 点的答案：

1) 我使用 .remove(activeGroup) 将其删除并创建了一个新组并将 activeGroup 中的项目添加到组中。

2) 这里有一些链接确实帮助我理解了 fabricjs 中使用的定位系统 Github link

$rootScope.alignLeft = function(){
            

            var activeObject = canvas.pages[canvas.activePageIndex].fabric.getActiveObject();
            var group = new fabric.Group();
            if(activeObject.type=="group"){
                var items = activeObject._objects;
                canvas.pages[canvas.activePageIndex].fabric.remove(activeObject);
                for(var i = 0;i<items.length;i++){
                    var ObjTop = activeObject.top + items[i].top + activeObject.height/2 ;
                    items[i].set({left :activeObject.left,top:ObjTop});
                    group.addWithUpdate(activeObject.item(i));

                }
                canvas.pages[canvas.activePageIndex].fabric.add(group);
                canvas.pages[canvas.activePageIndex].fabric.setActiveObject(group);
                canvas.pages[canvas.activePageIndex].fabric.renderAll();

            }


        }

如何左对齐组中的对象

How to left align objects in a group

javascript

fabricjs