Блог

Главная - Вопросы по программированию - Как сохранить изображение в задней части холста при перемещении элементов с помощью fabric.js ?

Как сохранить изображение в задней части холста при перемещении элементов с помощью fabric.js ?

#javascript #html #canvas #html5-canvas #fabricjs

#javascript #HTML #холст #html5-холст #fabricjs

Вопрос:

У меня есть большое изображение, загруженное изначально в мой холст, а затем я хотел бы иметь возможность рисовать на нем прямоугольники. Когда я перетаскиваю изображение, я все равно хочу, чтобы прямоугольники появлялись над изображением, а не отодвигались назад.

Вот планка;

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)
  }


});

Надеюсь, кто-нибудь может помочь!

Ответ №1:

Просто передайте preserveObjectStacking опцию, и при выборе она не будет перемещаться вперед.

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