Kumaşla görüntüyü hareket ettiren js

Question

Kumaş.js ile basit bir araç oluşturuyorum ve klavyeyi kullanarak nesneyi taşımak için işlevsellik eklemem gerekiyor.Ve sıkışıp kaldım.Şu an konsolda klavye olaylarına giriş yapıyorum Çalıştığını biliyorum.Ama bu fucntionality'yi tuval resmime nasıl ekleyeceğimi bilmiyorum.Ve yardım?

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

durumda 39 örneğin Dene:

canvas.getActiveObject().left += 5; 

Ve sonra belki canvas.renderAll()

İşte

Answer 2

benim çalışma kodudur:

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