Vải js di chuyển hình ảnh bằng bàn phím

Question

Im tạo công cụ đơn giản với fabric.js và tôi cần thêm chức năng để di chuyển đối tượng bằng bàn phím. Và tôi bị kẹt.Đối với thời điểm tôi đăng nhập vào bàn điều khiển sự kiện bàn phím, vì vậy tôi biết nó hoạt động. Nhưng tôi không biết làm thế nào để thêm fucntionality này vào hình ảnh canvas của tôi. Và giúp đỡ?

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

Hãy thử ví dụ về trường hợp 39:

canvas.getActiveObject().left += 5; 

Và sau đó có lẽ canvas.renderAll()

Answer 2

Đây là mã làm việc của tôi:

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