热门获取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 Release v1.1.0-review1。

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

Answer 1

基本解决方案是

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

然后您可能需要在画布中单击一次，这取决于您如何设置主页面和导航菜单。

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