Blazor 中的音乐符号 - 第 2 部分

Ajcek84

2.87/5 (4投票s)

2018 年 8 月 1 日

MIT

2分钟阅读

12533

104

Blazor 中的音乐符号 - 第 2 部分。

引言

这是关于在 Blazor 中实现开源乐谱库 Manufaktura.Controls 的系列文章的第二部分。关于 Blazor 0.4 的第一部分可以在这里找到。关于 Manufaktura.Controls 库的文章可以在这里找到。

几天前，Blazor 的新版本 0.5.1 发布了，所以我决定写一篇新文章，介绍第一部分中描述的问题是如何解决的。

将项目从 Blazor 0.4 升级到 0.5

将项目从 Blazor 0.4 升级到 0.5 的过程在这篇文章中描述。

更新后的 Blazor 库在 Nuget 上可用。更新后，您可能需要手动编辑项目文件，并将 Microsoft.AspNetCore.Blazor.Cli 的版本号从 0.4. 更改为 0.5.1

<DotNetCliToolReference Include="Microsoft.AspNetCore.Blazor.Cli" Version="0.5.1" />

将 Blazor 注入 HTML 的方式略有改变

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width">
    <title>BlazorApp1</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>Loading...</app> 
    <script src="_framework/blazor.webassembly.js"></script>
</body>
</html>

启动类中也有一些变化

public class Program
{
    public static void Main(string[] args)
    {
        CreateHostBuilder(args).Build().Run();
    }

    public static IWebAssemblyHostBuilder CreateHostBuilder(string[] args) =>
        BlazorWebAssemblyHost.CreateDefaultBuilder()
            .UseBlazorStartup<Startup>();
}

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
    }

    public void Configure(IBlazorApplicationBuilder app)
    {
        app.AddComponent<App>("app");
    }
}

应用这些更改后，第一部分创建的项目应该可以正常运行。

NoteViewer 组件的变化

Blazor 0.5 允许程序员在 Razor 视图中插入原始 HTML

@((MarkupString)RenderScore())

在第一部分中，我创建了一个 RawHtml 组件，现在不再需要它，因此我们可以将其从项目中删除，以及对 HtmlAgilityPack 的依赖。现在，NoteViewer 组件如下所示

@using Manufaktura.Controls.Model
@using Manufaktura.Controls.Rendering.Implementations

@((MarkupString)RenderScore())

@functions {

[Parameter]
Score Score { get; set; }

[Parameter]
HtmlScoreRendererSettings Settings { get; set; }

private int canvasIdCount = 0;

public string RenderScore()
{
    IScore2HtmlBuilder builder;

    if (Settings.RenderSurface == HtmlScoreRendererSettings.HtmlRenderSurface.Canvas)
        builder = new Score2HtmlCanvasBuilder
                  (Score, string.Format("scoreCanvas{0}", canvasIdCount), Settings);
    else if (Settings.RenderSurface == HtmlScoreRendererSettings.HtmlRenderSurface.Svg)
        builder = new Score2HtmlSvgBuilder(Score, string.Format
                  ("scoreCanvas{0}", canvasIdCount), Settings);
    else throw new NotImplementedException("Unsupported rendering engine.");

    string html = builder.Build();

    canvasIdCount++;

    return html;
}
}

已修复的内容

首先值得注意的是，SVG 的更新现在可以正常工作。当您单击“添加音符”按钮时，音符会毫无问题地添加到五线谱上。在 Firefox 浏览器上，几乎可以立即添加，但在 Chrome 等其他浏览器中，存在大约 1 秒的明显延迟。这是因为所有 DOM 操作当前都使用 invokes 完成，因此与 JavaScript DOM 操作相比速度较慢（参见 Stackoverflow 上的这个问题）。我希望在未来的版本中性能会得到改善。

在第一部分中，我提到在 Rebeam 方法中抛出了一个异常。现在，此方法抛出不同的错误

Uncaught (in promise) Error: System.NullReferenceException: 
Object reference not set to an instance of an object.
  at System.Linq.Expressions.Interpreter.LightLambda.MakeRunDelegateCtor 
  (:59341/System.Type delegateType) <0x212c460 + 0x00294> in <d4b4182dc3854440a5ca922d80e29ea1>:0
  at System.Linq.Expressions.Interpreter.LightLambda.GetRunDelegateCtor 
  (:59341/System.Type delegateType) <0x212bde0 + 0x00048> in <d4b4182dc3854440a5ca922d80e29ea1>:0
  at System.Linq.Expressions.Interpreter.LightLambda.MakeDelegate 
  (:59341/System.Type delegateType) <0x212bc50 + 0x0000e> in <d4b4182dc3854440a5ca922d80e29ea1>:0
  at System.Linq.Expressions.Interpreter.LightDelegateCreator.CreateDelegate 
  (:59341/System.Runtime.CompilerServices.IStrongBox[] closure) <0x212b3a8 + 
  0x00028> in <d4b4182dc3854440a5ca922d80e29ea1>:0
  at :59341/System.Linq.Expressions.Interpreter.LightDelegateCreator.CreateDelegate () 
  <0x212b238 + 0x0000a> in <d4b4182dc3854440a5ca922d80e29ea1>:0
  at System.Linq.Expressions.LambdaExpression.Compile 
  (:59341/System.Boolean preferInterpretation) <0x2103b20 + 0x0001c> in 
  <d4b4182dc3854440a5ca922d80e29ea1>:0
  at :59341/System.Linq.Expressions.LambdaExpression.Compile () 
  <0x2103908 + 0x0000a> in <d4b4182dc3854440a5ca922d80e29ea1>:0
  at Manufaktura.Controls.Extensions.StaffBuilder+<>c.<Rebeam>b__13_1 
  (:59341/System.Reflection.TypeInfo t) [0x00000] in 
  C:\Development\manufakturalibraries\Manufaktura.Controls\Extensions\StaffBuilder.cs:229

当发布新版本时，我会通知您 Manufaktura.Controls 在 Blazor 中实现进一步的进展情况。