Горячая, чтобы получить ключевые события для Blazor.Extensions.Canvas - PullRequest
Новая
       47

Горячая, чтобы получить ключевые события для Blazor.Extensions.Canvas

2 голосов
/ 23 февраля 2020

Мне нравится писать свое самое первое приложение 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;
    }
}

Этот подход не работает, зеленый прямоугольник не перемещается вправо, когда я нажимаю любую клавишу. Я использую do tnet 3.1.102 и Blazor.Extensions.Canvas Release v1.1.0-preview1.

Кто-нибудь знает, как я могу получить ключевые события для перемещения моего прямоугольника?

1 Ответ

2 голосов
/ 23 февраля 2020

Базовое c решение - 

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

, а затем вам может потребоваться один раз щелкнуть на холсте, в зависимости от того, как вы настроили главную страницу и NavMenu.

Создание уверен, что Canvas (-div-page) имеет фокус, что-то настраивать отдельно.

...