Fabric js moving image with keyboard

Question

Sto creando uno strumento semplice con fabric.js e ho bisogno di aggiungere funzionalità per spostare oggetti con la tastiera.E sono bloccato.Per il momento accedo alla console gli eventi della tastiera, quindi so che funziona.ma non so come aggiungere questa immagine alla mia immagine su tela.E aiuto?

$(function(){ 
    var canvas = new fabric.Canvas('imageCanvas', { 
     backgroundColor: 'rgba(255, 255, 255, 0)' 
    }); 
    var imageLoader = document.getElementById('imageLoader'); 
    imageLoader.addEventListener('change', handleImage, false); 

    function handleImage(e) { 
     var reader = new FileReader(); 
     reader.onload = function (event) { 
      var img = new Image(); 
      img.onload = function() { 
       var imgInstance = new fabric.Image(img, { 

       }) 
       canvas.add(imgInstance); 
      } 
      img.src = event.target.result; 

     } 
     reader.readAsDataURL(e.target.files[0]); 
    } 

    canvas.on('mouse:down', function(options) { 
     console.log(options.e.clientX, options.e.clientY); 
    }); 

    var canvasWrapper = document.getElementById('canvasWrapper'); 
    canvasWrapper.tabIndex = 1000; 
    canvasWrapper.addEventListener("keydown", doKeyDown, false); 

    function doKeyDown(e) { 
     document.onkeydown = function(e) { 
      switch (e.keyCode) { 
       case 38: /* Up arrow was pressed */ 
        console.log('up works') 
        break; 
       case 40: /* Down arrow was pressed */ 
        console.log('down works') 
        break; 
       case 37: /* Left arrow was pressed */ 
        console.log('left works') 
        break; 
       case 39: /* Right arrow was pressed */ 
        console.log('right works') 
        break; 
       } 
     } 
    } 

    var imageSaver = document.getElementById('imageSaver'); 
    imageSaver.addEventListener('click', imageBorder, false); 
    imageSaver.addEventListener('click', saveImage, false); 

    function imageBorder(e) { 
     canvas.item(0).hasControls = canvas.item(0).hasBorders = false; 
    } 

    function saveImage(e) { 
     this.href = canvas.toDataURL({ 
      format: 'png', 
      quality: 1 
     }); 
     this.download = 'test.png' 
     if(saveImage) { 
      location.reload(); 
     }else { 
      alert('somtehing went wrong') 
     } 
    } 

}); 

Answer 1

Prova ad esempio sul caso 39:

canvas.getActiveObject().left += 5; 

E poi magari canvas.renderAll()

Answer 2

Ecco il mio codice di lavoro:

HTML:

<div id="canvas-wrapper"> 
    <canvas id="c" width="900" height="600"></canvas> 
</div> 

JS:

var processKeys = function (evt) { 
    evt = evt || window.event; 

    var movementDelta = 2; 

    var activeObject = canvas.getActiveObject(); 
    var activeGroup = canvas.getActiveGroup(); 

    if (evt.keyCode === 37) { 
     evt.preventDefault(); // Prevent the default action 
     if (activeObject) { 
      var a = activeObject.get('left') - movementDelta; 
      activeObject.set('left', a); 
     } 
     else if (activeGroup) { 
      var a = activeGroup.get('left') - movementDelta; 
      activeGroup.set('left', a); 
     } 

    } else if (evt.keyCode === 39) { 
     evt.preventDefault(); // Prevent the default action 
     if (activeObject) { 
      var a = activeObject.get('left') + movementDelta; 
      activeObject.set('left', a); 
     } 
     else if (activeGroup) { 
      var a = activeGroup.get('left') + movementDelta; 
      activeGroup.set('left', a); 
     } 

    } else if (evt.keyCode === 38) { 
     evt.preventDefault(); // Prevent the default action 
     if (activeObject) { 
      var a = activeObject.get('top') - movementDelta; 
      activeObject.set('top', a); 
     } 
     else if (activeGroup) { 
      var a = activeGroup.get('top') - movementDelta; 
      activeGroup.set('top', a); 
     } 

    } else if (evt.keyCode === 40) { 
     evt.preventDefault(); // Prevent the default action 
     if (activeObject) { 
      var a = activeObject.get('top') + movementDelta; 
      activeObject.set('top', a); 
     } 
     else if (activeGroup) { 
      var a = activeGroup.get('top') + movementDelta; 
      activeGroup.set('top', a); 
     } 
    } 

    if (activeObject) { 
     activeObject.setCoords(); 
     canvas.renderAll(); 
    } else if (activeGroup) { 
     activeGroup.setCoords(); 
     canvas.renderAll(); 
    } 
}; 

var canvasWrapper = document.getElementById('canvas-wrapper'); 
canvasWrapper.tabIndex = 1000; 
canvasWrapper.addEventListener("keydown", processKeys, false); 
canvasWrapper.style.outline = "none"; // remove the blue halo around canvas