在Fabric.js中分层画布对象

Question

有没有办法通过官方API在Fabric.js画布上分层对象？现在,我发现这样做的唯一方法是手动迭代canvas._objects并重新排序它们,以便按特定顺序绘制它们.有没有更好的方法可以做到这一点(可能)破坏对象？

Answer 1

[编辑]我已经在下面更正了我的信息(我的不好,我最初想的是KineticJs api).

FabricJS具有这些API方法,可以更改对象的z-index:

canvas.sendBackwards(myObject)
canvas.sendToBack(myObject)
canvas.bringForward(myObject)
canvas.bringToFront(myObject)

在封面下,FabricJs通过从getObjects()数组中删除对象并将其拼接回所需位置来更改z-index.它有一个很好的优化,可以检查交叉对象.

bringForward: function (object) {
       var objects = this.getObjects(),
           idx = objects.indexOf(object),
           nextIntersectingIdx = idx;


       // if object is not on top of stack (last item in an array)
       if (idx !== objects.length-1) {

         // traverse up the stack looking for the nearest intersecting object
         for (var i = idx + 1, l = this._objects.length; i < l; ++i) {

           var isIntersecting = object.intersectsWithObject(objects[i]) ||
                                object.isContainedWithinObject(this._objects[i]) ||
                                this._objects[i].isContainedWithinObject(object);

           if (isIntersecting) {
             nextIntersectingIdx = i;
             break;
           }
         }
         removeFromArray(objects, object);
         objects.splice(nextIntersectingIdx, 0, object);
       }
       this.renderAll();
     },

Answer 2

第 1 步：您可以使用 preserveObjectStacking: true

第 2 步：然后使用 sendtoback,sendtofront....fabricjs 选项，如下所示

在这里回答