Fabricjs - How to move the selected object by keyboard

Viewed 4126

i want to move the selected object by keyboard,because it can be moved more accurately,I don't know how to do it.

2 Answers

Here is a simple function that'll do the work:

<canvas id="canvas" onkeydown="onKeyDown" tabindex="0"></canvas>

function onKeyDown(event) {
   const STEP = 1;
  // prevent scrolling
  event.preventDefault();
  let keyCode = event.keyCode || event.which;
  let activeGroup = this.canvas.getActiveObjects();

   if (Array.isArray(activeGroup)) {
     activeGroup.forEach(obj => {
       switch (keyCode) {
         case 37: // left
           obj.left = obj.left - STEP;
           break;
         case 38: // up
           obj.top = obj.top - STEP;
           break;
         case 39: // right
           obj.left = obj.left + STEP;
           break;
         case 40: // down
           obj.top = obj.top + STEP;
           break;
       }
       obj.setCoords();
     });

     this.canvas.renderAll();
   }
}
Related