Blazor Webassemble 使用 Svg 绘制交互线

Question

我创建了一个新的 blazor Web 应用程序项目，如下所示：(https://i.sstatic.net/ejiES4vI.png)

1 个解决方案中有 2 个项目。当我想在项目的客户端获取鼠标坐标时，如果没有 JavaScript 代码，我无法获取它们。 （当“惰性渲染模式”部分将其设置为自动时，我什至无法使用 js，但这不是重点。）我想做的是绘制 SVG 线，如 YouTube 链接（https:// www.youtube.com/watch?v=SGmioUSrZXo ），但无论我怎么尝试都做不到，我不习惯它，因为它既是服务器端又是客户端，我不知道什么要做的事。

客户端代码：

@page "/counter"

@inject IJSRuntime JSRuntime

<svg @ref="svgElement" width="100%" height="500px" style="border: 1px solid black;"
     @onmousedown="StartDrawing" @onmousemove="Draw" @onmouseup="StopDrawing">
    @foreach (var line in lines)
    {
        <line x1="@line.StartX" y1="@line.StartY" x2="@line.EndX" y2="@line.EndY"
              stroke="black" stroke-width="2" />
    }
</svg>

@code {
    private ElementReference svgElement;
    private bool isDrawing = false;
    private List<Line> lines = new List<Line>();
    private Line? currentLine;

    private async void StartDrawing(MouseEventArgs e)
    {
        isDrawing = true;
        var position = await GetSvgCoordinates(e.ClientX, e.ClientY);
        currentLine = new Line
            {
                StartX = position.X,
                StartY = position.Y
            };
    }

    private async void Draw(MouseEventArgs e)
    {
        if (isDrawing)
        {
            var position = await GetSvgCoordinates(e.ClientX, e.ClientY);
            currentLine!.EndX = position.X;
            currentLine!.EndY = position.Y;
            StateHasChanged();
        }
    }

    private void StopDrawing(MouseEventArgs e)
    {
        if (isDrawing)
        {
            lines.Add(currentLine!);
            isDrawing = false;
            StateHasChanged();
        }
    }

    private async Task<(double X, double Y)> GetSvgCoordinates(double clientX, double clientY)
    {
        var result = await JSRuntime.InvokeAsync<dynamic>("getSvgCoordinates", svgElement, clientX, clientY);
        return ((double)result.x, (double)result.y);
    }

    private class Line
    {
        public double StartX { get; set; }
        public double StartY { get; set; }
        public double EndX { get; set; }
        public double EndY { get; set; }
    }
}

客户端js代码(wwwroot/js/site.js):

window.getSvgCoordinates = (element, clientX, clientY) => {
    const svgRect = element.getBoundingClientRect();
    return {
        x: clientX - svgRect.left,
        y: clientY - svgRect.top
    };
};

服务器端MainLayout.razor代码：

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>
        <script src="js/site.js"></script>
        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

Answer 1

我现在明白了，我应该在我的代码中使用@rendermode InteractiveWebAssembly..