热门获取 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 发布 v1.1.0-preview1.

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

Answer 1

基本解决方案是

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

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

确保 Canvas（-div-页面）获得焦点需要单独配置。

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

Hot to get key events for Blazor.Extensions.Canvas

canvas

keyevent

blazor