2

我正在尝试将事件处理程序附加到画布元素中的 keyDown 事件。这是我的代码的简化版本。

class CanvasFun{

  CanvasElement canvas;

  CanvasFun(this.canvas){
    print("Game is loading!");
    this.canvas.onKeyDown.listen(handleInput);
  }

  void handleInput(e)
  {
    //breakpoint is never hit
    print(e.keyCode);
  }
}

我已经删除了一些绘图代码。在我的主函数中，我只需查询画布元素并将其传递给我的 CanvasFun 构造函数。

我也试过这样做：

void main() {

  var canvas = query("#Game");

  canvas.onKeyDown.listen(handleInput);

  var canvasFun = new CanvasFun(canvas); 

}
void handleInput(e)
{
  print(e.keyCode);
}
4

4 回答 4

3

事件未触发的原因是焦点位于文档（或其他元素，例如输入）上。事实上，canvas 元素即使在获得焦点时也不会触发事件。有些元素可以，比如输入元素。

解决方案是从文档或窗口中监听按键事件：

window.onKeyDown.listen(handleInput);
document.onKeyDown.listen(handleInput); // You already noticed this worked.
于 2013-02-07T12:44:31.157 回答
3

John McCutchan 编写了一个不错的 Dart 包来帮助处理键盘输入。你可以在这里阅读更多关于它的信息：http: //dartgamedevs.org/blog/2012/12/11/keyboard-input/

请注意，此库可帮助您“正确”处理输入。您不想在输入处理中做任何“工作”，而只是想注册一个键被按下。您可以在 requestAnimationFrame 回调中检查任何按键的状态。

希望有帮助！

于 2013-02-07T00:43:29.743 回答
2

有一种解决方法可以让canvas-element 接受键盘事件：

在 DartFlash 上处理键盘事件的问题

将 - 属性添加tabindex到 -canvas元素后，它可以获得焦点，然后它将接收键盘事件。

于 2013-02-07T17:43:32.987 回答
1

如果我在文档而不是画布元素上注册事件，看起来我可以让它工作。

document.onKeyDown.listen(handleInput);
于 2013-02-06T19:22:32.807 回答