如何在组中使用按键事件?

瓦莱里亚·马查多(Valeria Machado)

我正在与由整流器和变压器组成的小组一起工作,现在需要用鼠标以外的其他方式移动它。使用容器,我可以使用箭头键移动它,但是对于组,Keydown功能不起作用,我已经尝试使用group.on失败了。

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

薰衣草

您无法使用来监听画布节点(例如GroupShape上的键盘事件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();
    });

演示:https//konvajs.org/docs/events/Keyboard_Events.htm

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章