热门获取 Blazor.Extensions.Canvas 的关键事件答案

【问题标题】：Hot to get key events for Blazor.Extensions.Canvas热门获取 Blazor.Extensions.Canvas 的关键事件
【发布时间】：2020-02-23 06:10:07
【问题描述】：

我喜欢编写我的第一个 Blazor 应用程序。我想在画布上移动 2D 图形，我正在使用 Blazor.Extensions.Canvas 程序集。不幸的是，我无法从画布中获取关键事件。

@page "/pacman"

<BECanvas Width="800" Height="600" @ref="_canvasReference" @onkeypress="KeyWasPressed"/>


@code {

    private Canvas2DContext _context;
    protected BECanvasComponent _canvasReference;

    private int _xPos = 10;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        _context = await _canvasReference.CreateCanvas2DAsync();
        await _context.SetFillStyleAsync("green");
        await _context.FillRectAsync(_xPos, 100, 100, 100);
    }

    private void KeyWasPressed(KeyboardEventArgs e)
    {
        _xPos += 10;
    }
}

这种方法不起作用，当我按任意键时，绿色矩形不会向右移动。我正在使用 dotnet 3.1.102 和 Blazor.Extensions.Canvas Release v1.1.0-preview1。

有人知道我如何获得关键事件来移动我的矩形吗？

【问题讨论】：

标签： canvas blazor keyevent

【解决方案1】：

基本解决方案是

<div tabindex="0" @onkeydown="KeyWasPressed">
    <BECanvas  Width="800" Height="600" @ref="_canvasReference"  />
</div>

然后您可能需要在 Canvas 中单击一次，具体取决于您如何设置主页和 NavMenu。

确保 Canvas (-div-page) 具有焦点是需要单独配置的。

【讨论】：

谢谢，这行得通。但我没有得到箭头键的关键事件。你知道如何获得这些吗？
使用 onkeydown，而不是 onkeypress。键被编码为字符串，如"ArrowRight"。您可以在调试器中嗅探它们。