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

Question

您好，我想要像在 photoshop 上使用 FabricJS 那样进行图层排序控制

我有这个解决方案，但是当你在画布上有超过 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

首先，您需要在代码中进行一些重要的重构，主要是因为它的很多片段都是重复的。

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

---

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

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

• 您通过 push() 函数将 objs 添加到您的数组中，这并没有错，但它扰乱了您的 UI 可排序处理。那是因为每次更改 li 的位置时，只会更新画布和 HTML，而不会更新数组本身。

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

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

• 通过[]操作符将项目推入数组，使用对象id作为键；

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

注意： JSFiddle 仅适用于 HTTPS 外部链接，因此请确保您 即使您正在这样做，也可以在以后的尝试中正确导入它们 通过 CSS @import.