javascript – How to implement smoother canvas screen panning by keyboard with Fabric JS-ThrowExceptions

Exception or error:

With Fabric JS function canvas.relativePan() , i can implement screen panning like i did it in fiddle here :
https://jsfiddle.net/Vitozz_RDX/01xej9hc/55/

document.getElementById('canvasContainer').addEventListener("keydown", function(options) {       

    var units = 10

    if (options.keyCode == 65) {                           

        var delta = new fabric.Point(units,0) ;  

        canvas.relativePan(delta)
   }
   if (options.keyCode == 83) {               
        var delta = new fabric.Point(0,units) ;  

        canvas.relativePan(delta)
   }
   if (options.keyCode == 68) { 

        var delta = new fabric.Point(-units,0) ;  //{ x: 10, y: 0 }

        canvas.relativePan(delta)
   }
        if (options.keyCode == 87) {        

        var delta = new fabric.Point(0,-units) ;  //{ x: 10, y: 0 }

        canvas.relativePan(delta)
   }
});

canvas.add(circle) ;

When i press any (WASD) keybutton i won’t release the button till green Circle reaches the edge of Canvas el.

Because of using keyboard events, my solution got an issue – twitching :

1)Initial lagging – for example when i initially press keybutton “Left”, green Circle starts movement, then there is a pause, and only after a moment figure continue its movement

2)All movement got not so big (but still noticable) twitching while moving after start

Is it possibile to get rid of both problems ?

How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *