javascript 如何在Blazor中划清界限?

8fsztsew  于 2023-01-29  发布在  Java
关注(0)|答案(3)|浏览(152)

我在GitHub上见过this project,它是HTML画布的 Package 器,我也见过this questionthis article等,它们似乎通过JavaScript调用在画布上绘制,因此它基本上作为普通JS代码执行。
我想知道是否有另一种方法来画线和创建动画一样,在Blazor,应该有接近本机的性能。
有没有一种替代HTML画布和保持 Package JS调用,以创建像动画画线,像一些官方支持这种功能?

v8wbuo2f

v8wbuo2f1#

不,目前没有替代方案,Blazor中也没有为此内置任何内容。
Blazor使用网络技术来渲染用户界面。
即使Blazor提供了一种内置的方式来绘制东西,也只不过是画布或WebGL上的一个观点化的API。
尽管如此,我还是希望有一天这个团队会决定创建这样一个用于在画布上绘图的内置API。这些绘图功能将使Blazor对许多用户更具吸引力。看看p5 js的巨大成功和p5 js为javascript社区带来的大量新程序员吧。
我认为Blazor团队承担这样一个任务的可能性很低,他们可能希望社区能够这样做。然而,从MS获得一个很棒的Windows图形渲染库的可能性也很低,我们让Shawn Hargreaves创建了一个很棒的Win 2D库。所以让我们祈祷吧!

dbf7pr2w

dbf7pr2w2#

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>
mklgxw1f

mklgxw1f3#

你说的draw是指用户可以交互式地创建线条吗?还是仅仅是你想通过编程向屏幕添加内容。因为这是非常不同的问题。
如果是后者,那么您应该考虑内联<svg>,它有两个优点:1)SVG线条没有像素化,所以它们可以缩放,看起来总是很棒;2)<svg>标签是标记,可以直接在Blazor中添加。
即使我是在交互式地画线,我也会选择svg而不是HTML画布,tbh,除非我试图为SD或其他东西做一个界面。

相关问题