Question

我想通过键盘移动所选对象，因为它可以更准确地移动，我不知道该怎么做。

Answer 1

以下是使用向左/向上/向右/向下键移动所选对象/组的简单实现：

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>

Answer 2

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

function onKeyDown(event) {
  // prevent scrolling
  event.preventDefault();
  let keyCode = event.keyCode || event.which;
  switch (keyCode) {
    case 37: // left
      this.moveSelected("left");
      break;
    case 38: // up
      this.moveSelected("up");
      break;
    case 39: // right
      this.moveSelected("right");
      break;
    case 40: // left
      this.moveSelected("down");
      break;

    default:
      break;
  }
}

function moveSelected(direction) {
  const STEP = 1;
  let activeGroup = this.canvas.getActiveObjects();

  if (activeGroup) {
    activeGroup.forEach(obj => {
      switch (direction) {
        case "left":
          obj.left = obj.left - STEP;
          break;
        case "up":
          obj.top = obj.top - STEP;
          break;
        case "right":
          obj.left = obj.left + STEP;
          break;
        case "down":
          obj.top = obj.top + STEP;
          break;
      }
      obj.setCoords();
    });

    this.canvas.renderAll();
  }
}

Fabricjs - 如何通过键盘移动所选对象

2 个答案: