使用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 });