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

Question

我喜欢编写我的第一个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版本v1.1.0-preview1。

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

Answer 1

基本解决方法是

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

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

确保画布（-div-page）具有焦点是需要单独配置的。