javascript - paper - fabric.js tutorial

¿Cómo mantener la imagen en la parte posterior del lienzo cuando se mueven elementos con fabric.js?

Question

Tengo una imagen grande cargada inicialmente en mi lienzo, y luego me gustaría dibujar rectángulos sobre ella. Cuando arrastro la imagen, todavía quiero que aparezcan los rectángulos sobre la imagen, en lugar de que sean empujados hacia atrás.

Aquí hay un plunk;

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

Si es posible, me gustaría poder asegurarme de que pase lo que pase, ¿la imagen siempre está en la parte posterior? He buscado bastante extensamente y no puedo encontrar una solución. ¡Se está volviendo cada vez más frustrante!

Inicialmente pensé que sería tan simple como esto;

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


});

¡Espero que alguien pueda ayudar!

Answer 1

Simplemente pase la opción preserveObjectStacking y las cosas no saldrán al frente cuando se seleccionen.

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