Блог

У меня есть приложение blazor wasm, которое раз в секунду получает информацию о некоторых устройствах, которые перемещаются в декартовой системе координат (X (мм), Y (мм), Угол, скорость (м/с), уровень заряда батареи (В) и т. Д.). Он показывает информацию в таблицах и таблицах данных, но я хотел бы добавить графическую визуализацию положения.

В WPF я сделал это, используя элемент управления canvas и масштабируя координаты, которые будут отображаться на холсте:

при изменении координат и/или угла (в градусах) позиция обновляется до новой позиции.

Я хотел бы сделать то же самое в блейзоре, но я не знаю, с чего начать.

ПРИМЕЧАНИЕ: Я не ищу код, просто подсказки, какой алгоритм использовать.

• Вы можете использовать элемент HTML5 Canvas и рисовать на нем, что-то вроде холста WPF. Скорее всего, вы бы использовали существующую оболочку Blazor, такую как https://github.com/BlazorExtensions/Canvas.
• Вы также можете создать встроенный SVG, используя элемент <svg> и добавив свои устройства в качестве подэлементов. Я думаю, что у него будет худшая производительность, чем у холста, если вы часто обновляете его, но это вариант.
• Третий вариант-установить <div> с параметром position:relative, а затем добавить ваши устройства как <div><div>или компоненты Blazor внутри него с параметром position:absolute, а затем обновить их верхние и левые атрибуты, чтобы переместить их по мере необходимости. Если ваш вариант использования достаточно прост, это, вероятно, самый простой вариант.
• Существует также несколько различных библиотек построения графиков и графиков для Blazor, но я с ними не знаком, и они могут не подходить для быстро меняющихся данных.