在Blazor的音乐符号-第二部分

介绍这是关于实现开源音乐符号库Manufaktura的系列文章的第二部分。在Blazor控制。关于Blazor 0.4的第一部分可以在这里找到。篇关于Manufaktura。控件库可以在这里找到。几天前，Blazor发布了一个新的0.5.1版本，所以我决定写一篇新文章，介绍如何解决第1部分中描述的问题。将项目从Blazor 0.4升级到0.5 本文描述了项目从Blazor 0.4升级到0.5的过程。更新的Blazor图书馆可以在Nuget上找到。更新后，你可能不得不手动编辑你的项目文件，并改变微软。aspnetcore . blazor的版本号。Cli从0.4。0.5.1: 隐藏,复制Code

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

在HTML中注入Blazor的方式略有改变: 隐藏,复制Code

<!DOCTYPEhtml>
<html>
<head>
    <metacharset="utf-8"/>
    <metaname="viewport"content="width=device-width">
    <title>BlazorApp1</title>
    <basehref="/"/>
    <linkhref="css/bootstrap/bootstrap.min.css"rel="stylesheet"/>
    <linkhref="css/site.css"rel="stylesheet"/>
</head>
<body>
    <app>Loading...</app> 
    <scriptsrc="_framework/blazor.webassembly.js"></script>
</body>
</html>

启动类也有一些变化: 隐藏,复制Code

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");
    }
}

应用这些更改之后，在第1部分中创建的项目应该可以正常运行。 NoteViewer组件中的更改 Blazor 0.5使程序员可以在Razor视图中插入原始HTML: 隐藏,复制Code

@((MarkupString)RenderScore())

在第1部分中，我创建了一个不再需要的RawHtml组件，因此我们可以将其从项目中删除，并删除对HtmlAgilityPack的依赖。现在，NoteViewer组件看起来像这样: 隐藏,收缩,复制Code

@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更新现在可以正常工作。当您单击添加注释按钮时，注释将毫无问题地添加到staff中。在Firefox浏览器上，它几乎是立即添加的，然而在其他浏览器，如Chrome，有一个显著的延迟约1秒。这是因为目前所有的DOM操作都是通过调用来完成的，所以它比JavaScript DOM操作要慢(参见Stackoverflow上的这个问题)。我希望在未来的版本中性能会得到改善。在第一部分中，我提到了在Rebeam方法中抛出的一个异常。现在这个方法抛出了一个不同的错误: 隐藏,复制Code

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实施的进一步进展，我会通知你。当发布新版本时，Blazor中的控件。本文转载于：http://www.diyabc.com/frontweb/news17314.html

posted @ 2020-08-13 01:22 Dincat 阅读(204) 评论(0) 编辑收藏举报

刷新页面返回顶部

Dincat

在Blazor的音乐符号-第二部分

公告