如何从Blazor访问HTML Canvas?

时间:2019-07-23 17:33:52

标签: blazor

我正在尝试从Blazor到HTML Canvas进行2D绘图。 我尝试使用Blazor.Extensions.Canvas,但它似乎已经过时,并且针对以前的Blazor服务器端实现。

我尝试实现一个简单的示例,但出现了异常

有...

{
protected Blazor.Extensions.BECanvasComponent _canvasRef;
private Blazor.Extensions.Canvas.Canvas2D.Canvas2DContext _context;

// Note I had to provide the full path since it seemed to ignore
//  my @using statement in most cases

    protected override async Task OnAfterRenderAsync()
    {
      this._context = await this._canvasRef.CreateCanvas2DAsync();
      await this._context.SetFillStyleAsync("green");

      await this._context.FillRectAsync(10, 100, 100, 100);

      await this._context.SetFontAsync("48px serif");
      await this._context.StrokeTextAsync("Hello Blazor!!!", 10, 100);
    }
}

我什至不得不在生成的文件中添加canvas类的完整路径。 但是,我终于在没有警告的情况下构建了它。 我希望它会绘制绿色填充的矩形,但是...

这在浏览器中创建了一个“未处理的异常呈现组件”: “ Microsoft.JSInterop.JSException:t.getContext不是函数”

引用该行: 'this._context =等待this._canvasRef.CreateCanvas2DAsync();'

1 个答案:

答案 0 :(得分:0)

我相信.net核心版本和canvas版本的兼容性问题。 (我在使用.net Core Preview 6和canvas 0.1.9时遇到了同样的问题)。 目前,他们发布了Canvas 0.2.0,因此它应与.core预览版7配合使用。