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

Question

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

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

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

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

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

所有 Canvas 对象创建都有相同的代码，所以将其包装到一个函数中；
您通过 push() 函数将 objs 添加到您的数组中，这没有错，但它弄乱了您的 UI 可排序处理。那是因为每次你改变 li 的位置时，只有 canvas 和 HTML 被更新，而不是数组本身。

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

相反，我决定使用辅助数组，每次对项目进行排序时都会填充它。
通过[]运算符将项目推入数组，使用对象id作为键；
最后，请注意我放了 a promise 以保证只有在 canvas 工作完成后才会呈现新的 objectArray。

Note: JSFiddle only works with HTTPS external links, so make sure you import them correctly in future attempts, even if you're doing this via CSS @import.

Answer 2

使用 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() 就可以了

这是link，您可以看到排序效果很好 https://jsfiddle.net/peLcju2h/24/

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

Z-Index control objects in FabricJS using jQuery UI sortable

javascript

jquery

jquery-ui

canvas

fabricjs