FabricJS中的Z-Index控件对象使用jQuery UI可排序

Question

您好我希望使用FabricJS

在Photoshop上进行图层排序控制

我有这个解决方案但是当你在画布上有超过3个对象时它不能正常工作：

$("#containerLayers").sortable({
  change: function(event, ui){
    $( "#containerLayers li" ).each(function(index,list){
        if(objectArray[$(list).attr('id')]){
            canvas.moveTo(objectArray[$(list).attr('id')],index);
        }
    });
    canvas.renderAll();
  }
});

以下是代码的其他部分： https://jsfiddle.net/peLcju2h/16/

有没有人有比这更好的解决方案？

Answer 1

使用FabricJS进行图层排序的最佳解决方案是：

$("#containerLayers").sortable({
    update: function(event, ui){

        var items = $(this).children();

        items.each(function(i,item){
            canvas.sendToBack(objectArray[item.id]);
        });
        canvas.renderAll();
    }
});

而不是使用canvas.moveTo()只需使用canvas.sendToBack()，它就会完美无缺

这是链接，你可以看到订购工作正常 https://jsfiddle.net/peLcju2h/24/

Answer 2

首先，你的代码中有一些重要的重构，主要是因为它的很多snipets都是重复的。

我已经这样做了，最终的工作代码在这里：https://jsfiddle.net/peLcju2h/18/

让我们看看一些注意事项：

• 所有Canvas对象创建都具有相同的代码，因此将其包装到函数中;

• 您正在通过push()函数向您的数组添加objs，这没有错，但它搞砸了您的UI可排序处理。这是因为每次更改li的位置时，只更新画布和HTML，而不更新数组本身。

  你可以使用reordering function，但是一旦元素位置没有预定义的顺序或改变逻辑，它就不适合这里的目标。

  相反，我决定使用辅助数组，每次对项目进行排序时都会填充它。

• 使用对象[]作为键，通过id运算符将项目推送到数组中;

• 最后，请注意我放置a promise以确保只有在完成画布工作后才会呈现新的objectArray。

  

注意： JSFiddle 仅适用于HTTPS外部链接，因此请确保   即使您正在执行此操作，也会在将来的尝试中正确导入它们   通过CSS @import。