패브릭 js 키보드로 이미지 이동

Question

Fab.js로 간단한 도구를 만들고 키보드로 객체를 움직일 수있는 기능을 추가해야합니다. 멈추었습니다. 콘솔에 키보드 이벤트로 로그인하면 그것이 효과가 있다는 것을 알았습니다.하지만이 캔버스 이미지에이 기능을 추가하는 방법을 모르겠습니다. 그리고 도움이 필요하십니까?

는

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

경우 39 예를 들어보십시오 :

canvas.getActiveObject().left += 5; 

을 그리고 어쩌면 canvas.renderAll()

다음

Answer 2

내 작업 코드 :

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