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