Question

我是面料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

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

第1点和第2点的答案：

1）我使用.remove（activeGroup）将其删除并创建一个新组，并将activeGroup中的项添加到组中。

2）以下是一些确实帮助我理解fabricjs中使用的定位系统的链接stackOverflow link Github link

＆＃13;

$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();

            }


        }

＆＃13;

如何在组中对齐对象

1 个答案: