Tkanina js ruchomy obraz z klawiaturą

Question

Tworzę proste narzędzie z fabric.js i muszę dodać funkcjonalność, aby przenieść obiekt z klawiaturą. I utknąłem. Do momentu zalogowania się na konsolę zdarzenia na klawiaturze, więc wiem, że działa. ale nie wiem, jak dodać tę przydatność do mojego obrazu na płótnie. I pomoc?

$(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

Spróbuj na przykład na razie 39:

canvas.getActiveObject().left += 5; 

A potem może canvas.renderAll()

Answer 2

Oto mój kod roboczych:

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