如何在Blazor中绘制一条线？

Question

字面上如何在Blazor中绘制一条线？我看到了GitHub上的this project，它是HTML画布的包装器，我还看到了this question和this article等其他内容，它们似乎通过JavaScript调用来在画布上绘制，因此它基本上执行为纯JS代码。

我想知道是否有另一种方法可以绘制线条并创建动画，就像在Blazor中具有接近本地性能一样。

是否有替代HTML画布的方法，并保持JS调用包装以创建类似绘制线条的动画，例如支持此类功能的官方内容？

- meJustAndrew

Answer 1

不，目前没有其他选择，并且Blazor本身也没有这个功能。

Blazor使用Web技术来渲染用户界面。

即使Blazor提供了内置的绘图方式，那也只是一个针对canvas或WebGL的API。

尽管如此，我仍然希望团队有一天能决定为在canvas上绘制创建这样一个内置API。这些绘图功能将使Blazor对许多用户更具吸引力。看看p5js的巨大成功以及p5js为JavaScript社区带来的新程序员数量。

我认为Blazor团队接手这项任务的可能性非常低，他们可能希望由社区完成。然而，获得微软出色的Win2D库的机会也非常低，但我们还是得到了Shawn Hargreaves的创作。所以让我们保持乐观！

- Postlagerkarte

---

我真的希望有一天会有人编辑这个答案，说有另一种方法，微软或者社区构建了一个集成在Blazor中的图形API，但在那之前，我们将使用现有的。 - meJustAndrew

这是WebAssembly技术的一个根本限制。WebAssembly没有相应的API，因此需要使用JavaScript。无论提供了什么样的抽象，最终结果都会基于JavaScript，直到WebAssembly被赋予直接访问的API。这不是“Blazor问题”。 - Ed Charbeneau

@EdCharbeneau 你确定 WASM 不能在页面上呈现吗？我正在研究 Skia CanvasKit，看起来很有前途。 - Amir Mahdi Nassiri

@Amir "WebGL上下文封装为SkSurface，允许直接绘制到HTML画布"。WebGL是JavaScript API，因此...“无论您获得什么抽象，最终结果都是JavaScript”。 - Ed Charbeneau

Answer 2

“By draw, do you mean the user can create lines interactively? Or just that you want to programmatically add content to the screen. Because these are very different issues.”

“如果您说的是后者，那么您应该考虑使用内联<svg>，它有两个优点：1）SVG线条不会失真，因此可以缩放并始终保持清晰；2）<svg>标记作为标记语言，可以直接添加到Blazor中。”

“即使我要交互式地绘制线条，除非我正在尝试为SD或其他类似界面设计，否则我也会选择svg而不是HTML画布。”

- Bennyboy1973

Answer 3

2023年1月的一个变通方法。无法通过Blazor实现，必须使用JavaScript :_(

在.razor文件中

<canvas id="myCanvas"></canvas>

@code{
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await JSRuntime.InvokeVoidAsync("TestCanvas", "myCanvas");
    }
}

在TestCanvas.js文件中

function TestCanvas(id) {
    let canvas = document.getElementById(id);

    if (canvas == null) {
        return false;
    }

    let ctx = canvas.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(10, 10, 20, 20);
}

在"_Layout.html"文件中添加对TestCanvas.js文件的引用。

<script src="~/js/TestCanvas.js"></script>

- Duefectu