fabric.js在另一个对象下移动一个对象

时间:2016-08-25 20:01:28

标签: javascript html fabricjs

我有两层(0,1)。 0是画布上的底部图像,1是顶部。第0层是人体模板,第1层是一些眼睛。我希望能够移动最底层(主体层),而无需移动顶层或覆盖顶层。基本上,让眼睛坐在身体上并且可见,但能够移动身体图像。我已经能够实现大部分目标:

canvas.item(0).selectable = true;
canvas.item(0).evented = true;
canvas.item(1).selectable = false;
canvas.item(1).evented = false;

然而,当我开始拖动图层0(人体图层)时,它会将该图层置于顶部并遮住眼睛,即使在我打印对象数组时,它仍然表示正文图层是索引0.我缺少什么?这有可能吗?在较高的可见层下移动较低层?

这就是我最初添加图层的方式:

    fabric.Image.fromURL(imgString, function(oImg) {

        oImg.scale(0.4);
        canvas.centerObject(oImg);
        canvas.add(oImg);

        canvas.renderAll();


    });

1 个答案:

答案 0 :(得分:2)

简单地添加

preserveObjectStacking: true

到canvas初始化程序修复此问题。

var canvas = new fabric.Canvas('mainCanvas',{
        preserveObjectStacking: true
    });