时间戳

首页 > 解决方案 > Blazor wasm 动画形状到坐标

animation - Blazor wasm 动画形状到坐标

问题描述

我有一个 blazor wasm 应用程序，它每秒接收一次有关围绕笛卡尔坐标系布局（X（mm）、Y（mm）、角度、速度（m/s）、电池电量（V）等移动的设备的信息） ）。它在数据网格和表格中显示信息，但我想添加位置的图形可视化。

在 WPF 中，我使用画布控件并缩放要在画布中显示的坐标来做到这一点：

当坐标和/或角度（以度为单位）发生变化时，位置将更新为新位置。

我想在 blazor 中做同样的事情，但我不知道从哪里开始。

注意：我不是在寻找代码，只是提示使用哪种算法。

标签： animationcanvasblazor

解决方案

  • 您可以使用 HTML5 Canvas 元素并对其进行绘制，有点像 WPF 画布。您很可能会使用现有的 Blazor 包装器，例如https://github.com/BlazorExtensions/Canvas。

  • 您还可以使用 <svg> 元素创建内联 SVG，并将您的设备添加为子元素。我认为如果您进行频繁更新，它的性能会比画布差，但这是一种选择。

  • 第三种选择是将 <div> 设置为 position:relative，然后将您的设备添加为 <div>s 或 Blazor 组件，其中包含 position:absolute，然后更新它们的顶部和左侧属性以根据需要移动它们。如果您的用例足够简单，它可能是最直接的选择。

  • Blazor 还有几个不同的图表和绘图库，但我不熟悉它们，它们可能不适合快速变化的数据。

推荐阅读