Blazor Webassembly Рисование интерактивных линий с использованием Svg ⇐ C#

[Anonymous]

Я создаю новый проект веб-приложения blazor следующим образом: (https://i.sstatic.net/ejiES4vI.png)
Он состоит из двух проектов в одном решении. Когда я хотел получить координаты мыши на стороне клиента моего проекта, я не мог получить их без кода JavaScript. (Я даже не смог справиться с js, когда часть «Режим инерактивного рендеринга» установила его на автоматический режим, но дело не в этом.) Я хочу нарисовать линии SVG, как показано в ссылке на YouTube ( https://www .youtube.com/watch?v=SGmioUSrZXo ), но не смог этого сделать, что бы я ни пытался, я к этому не привык, потому что это и на стороне сервера, и на стороне клиента, я не знаю, что делать .
Коды на стороне клиента:
@page "/counter"

@inject IJSRuntime JSRuntime


@foreach (var line in lines)
{

}


@code {
private ElementReference svgElement;
private bool isDrawing = false;
private List lines = new List();
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 GetSvgCoordinates(double clientX, double clientY)
{
var result = await JSRuntime.InvokeAsync("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






About



@Body




An unhandled error has occurred.
Reload
🗙



Подробнее здесь: https://stackoverflow.com/questions/789 ... -using-svg