canvas - 热获取 Blazor.Extensions.Canvas 的关键事件

Question

我喜欢编写我的第一个 Blazor 应用程序。我想在 Canvas 上移动 2D 图形，我正在使用 Blazor.Extensions.Canvas 程序集。不幸的是，我无法从 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。

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

Answer 1

基本的解决办法是

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

然后您可能需要在 Canvas 中单击一次，具体取决于您设置主页和导航菜单的方式。

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