如何在组中使用keydown事件？

Question

我正在研究一个由rects和变换器组成的小组，现在需要以鼠标以外的方式移动它。使用容器我可以使用箭头键移动它，但是使用Keydown函数组不起作用，我已经尝试使用group.on但没有成功。

我希望当单击箭头时，它将开始在移动它的组中工作。

Answer 1

您无法使用Group在画布节点（例如Shape或Konva）上收听键盘事件。但你可以很容易地模仿它。

您可以使Stage节点可聚焦并在其上收听键盘事件。然后在事件处理程序中执行必需的操作。

   var container = stage.container();

    // make it focusable

    container.tabIndex = 1;
    // focus it
    // also stage will be in focus on its click
    container.focus();


    const DELTA = 4;

    container.addEventListener('keydown', function (e) {
      if (e.keyCode === 37) {
        circle.x(circle.x() - DELTA);
      } else if (e.keyCode === 38) {
        circle.y(circle.y() - DELTA);
      } else if (e.keyCode === 39) {
        circle.x(circle.x() + DELTA);
      } else if (e.keyCode === 40) {
        circle.y(circle.y() + DELTA);
      } else {
        return;
      }
      e.preventDefault();
      layer.batchDraw();
    });

但是：ぁzxswい