使用fabric.js移动元素时如何将图像保留在画布的背面？

Question

我有一个大图像最初加载到我的画布中，然后我希望能够在它上面绘制矩形。当我拖动图像时，我仍然希望矩形出现在图像上，而不是将它们推到后面。

这是一个插件;

http://plnkr.co/edit/iJV0bZrlCG4CJXlhDw8w?p=preview

如果可能的话，我希望能够确保无论如何，图像总是在后面？我看了很多，但找不到解决办法。它变得越来越令人沮丧！

最初我认为它会像这样简单;

canvas.on('object:moving', function(e) {

  var obj = e.target;
  console.log(obj.id)
  if (obj.id === 'img') {
    canvas.sendToBack(obj)
  } else {
    canvas.bringToFront(obj)
  }


});

希望有人可以提供帮助！

Answer 1

只需传入preserveObjectStacking选项，选中后就​​不会跳到前面。

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