CODEWITHSUNDEEP
fabricjs
H.Henry
H.Henry

Reputation: 53

Fabricjs - How to move the selected object by keyboard

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

Upvotes: 4

Views: 5302

Answers (3)

Ajil Paul
Ajil Paul

Reputation: 375

The previous solution is no longer applicable due to the removal of the getActiveGroup method in the latest version. Please find below the revised solution.

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="lib/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="lib/fabric.min.js"></script>
  </head>

  <body>
    <canvas id="canvas" style="border: 1px solid #cccccc"></canvas>

    <script>
      const STEP = 10;

      var canvas = new fabric.Canvas("canvas", {
        width: 500,
        height: 500,
      });

      canvas.add(
        new fabric.Rect({
          left: 100,
          top: 100,
          width: 50,
          height: 50,
          fill: "#faa",
        })
      );
      canvas.add(
        new fabric.Rect({
          left: 300,
          top: 300,
          width: 50,
          height: 50,
          fill: "#afa",
        })
      );

      fabric.util.addListener(document.body, "keydown", function (options) {
        if (options.repeat) {
          return;
        }
        var key = options.which || options.keyCode; // key detection
        if (key === 37) {
          // handle Left key
          moveSelected([-1, 0]);
        } else if (key === 38) {
          // handle Up key
          moveSelected([0, -1]);
        } else if (key === 39) {
          // handle Right key
          moveSelected([1, 0]);
        } else if (key === 40) {
          // handle Down key
          moveSelected([0, 1]);
        }
      });

      function moveSelected(direction = []) {
        const activeObject = canvas.getActiveObject();
        if (activeObject) {
          activeObject.set({
            left: activeObject.left + direction[0] * STEP,
            top: activeObject.top + direction[1] * STEP,
          });
          canvas.renderAll();
          console.log("selected objects are moved");
        }
      }
    </script>
  </body>
</html>

Upvotes: 0

Eylon Sultan
Eylon Sultan

Reputation: 1036

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();
   }
}

Upvotes: 3

Milan Hlin&#225;k
Milan Hlin&#225;k

Reputation: 4440

Here is my simple implementation of moving selected object/group using left/up/right/down keys:

https://jsfiddle.net/milanhlinak/4fofjzvm/

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="lib/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="lib/fabric.min.js"></script>
</head>

<body>

    <canvas id="canvas" style="border: 1px solid #cccccc"></canvas>

    <script>
        const STEP = 10;

        var Direction = {
            LEFT: 0,
            UP: 1,
            RIGHT: 2,
            DOWN: 3
        };

        var canvas = new fabric.Canvas('canvas', {
            width: 500,
            height: 500,
        });

        canvas.add(new fabric.Rect({
            left: 100,
            top: 100,
            width: 50,
            height: 50,
            fill: '#faa'

        }));
        canvas.add(new fabric.Rect({
            left: 300,
            top: 300,
            width: 50,
            height: 50,
            fill: '#afa'
        }));

        fabric.util.addListener(document.body, 'keydown', function (options) {
            if (options.repeat) {
                return;
            }
            var key = options.which || options.keyCode; // key detection
            if (key === 37) { // handle Left key
                moveSelected(Direction.LEFT);
            } else if (key === 38) { // handle Up key
                moveSelected(Direction.UP);
            } else if (key === 39) { // handle Right key
                moveSelected(Direction.RIGHT);
            } else if (key === 40) { // handle Down key
                moveSelected(Direction.DOWN);
            }
        });

        function moveSelected(direction) {

            var activeObject = canvas.getActiveObject();
            var activeGroup = canvas.getActiveGroup();

            if (activeObject) {
                switch (direction) {
                case Direction.LEFT:
                    activeObject.setLeft(activeObject.getLeft() - STEP);
                    break;
                case Direction.UP:
                    activeObject.setTop(activeObject.getTop() - STEP);
                    break;
                case Direction.RIGHT:
                    activeObject.setLeft(activeObject.getLeft() + STEP);
                    break;
                case Direction.DOWN:
                    activeObject.setTop(activeObject.getTop() + STEP);
                    break;
                }
                activeObject.setCoords();
                canvas.renderAll();
                console.log('selected objects was moved');
            } else if (activeGroup) {
                switch (direction) {
                case Direction.LEFT:
                    activeGroup.setLeft(activeGroup.getLeft() - STEP);
                    break;
                case Direction.UP:
                    activeGroup.setTop(activeGroup.getTop() - STEP);
                    break;
                case Direction.RIGHT:
                    activeGroup.setLeft(activeGroup.getLeft() + STEP);
                    break;
                case Direction.DOWN:
                    activeGroup.setTop(activeGroup.getTop() + STEP);
                    break;
                }
                activeGroup.setCoords();
                canvas.renderAll();
                console.log('selected group was moved');
            } else {
                console.log('no object selected');
            }

        }
    </script>

</body>

</html>

Upvotes: 7

Related Questions