如何使用Typescript和HTML创建导航指南针？

Question

我希望为我的Ionic项目使用HTML，CSS和Typescript显示指南针标题。我已经将标题设置为0-360之间的数字，并且真正的标题显然是360。

如何最好地做到这一点？我希望它可以实时制作动画。

一些想法：

• 具有指南针的背景图像，将针图像覆盖在指南针图像上，并根据航向度旋转针。
• 完全使用CSS绘制圆和针，没有图像，并使用相同的旋转逻辑。

Answer 1

您可以尝试获取或创建指南针的 SVG 并为指南针设置动画。

除了从头开始使用 CSS 构建指南针外，您还可以在互联网上寻找预先构建的指南针。搜索纯 CSS 指南针，您会发现一些令人印象深刻的指南针

我个人会使用 SVG 选项，因为您不必麻烦调整div。您所需要做的就是找出针的代码在哪里，并使用 CSS 类旋转它。