绘制半规/速度计（需要 JavaScript Canvas 或 Java Swing 示例）[关闭]答案

【问题标题】：Drawing a half gauge/speedometer (JavaScript Canvas or Java Swing Example needed) [closed]绘制半规/速度计（需要 JavaScript Canvas 或 Java Swing 示例）[关闭]
【发布时间】：2011-02-22 19:58:44
【问题描述】：

有没有 javascript canvas 或 java swing 示例？

类似这样的： http://www.fmsinc.com/microsoftaccess/controls/components/gauges/gauge-half.gif

我应该如何绘制“分隔线”？

【问题讨论】：

见my answer到this question；具体来说，this demo 我创建的。使用任何你想要的图形。

标签： javascript swing canvas

【解决方案1】：

如果您想要一个简单的基于 JavaScript 画布的仪表，您可以使用我自己创建的一个小库。它易于使用，并具有 wyswig 配置器，可轻松定制仪表。我已经把它推到了 GitHub http://bernii.github.com/gauge.js

您可以得到什么预览：

【讨论】：

如何将其配置为红色，同时达到最大值（如示例所示）
这在 IE8 中看起来明显（但可以接受）不稳定，尤其是在高/低颜色与针所在的位置相交的地方...在 chrome 28 和 firefox 22 中看起来很棒。很容易自定义这个插件。
非常好，虽然在 IE 中几乎无法使用。
@berni 你为 Angular 2 实现了这个吗？

【解决方案2】：

我建议查看Raphael Javascript 图形库。它适用于所有浏览器（包括旧版本的 IE！），并且使用矢量图形，因此它生成的图形可以缩放和旋转而不会损失图像质量，甚至还包括动画功能。

这是一个使用 Raphael 制作一些非常漂亮的仪表的人的链接： http://techoctave.com/c7/posts/17-jquery-dashboard-gauges-using-raphael-xhtml-and-css

但是，如果您想自己绘制，使用 Raphael 应该不难做到：它能够绘制圆环和形状，并为它们设置动画。看起来像您的示例的东西应该不难实现。

以下是我快速拼凑的一些代码作为示例：

<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">
  var gauge = Raphael('mydiv', 200, 100);
  var semicircle = gauge.circle(100, 100, 100).attr({"fill": "#FF0000"});
  var indicator = gauge.rect(0, 99, 100, 2);
  indicator.animate({rotation: "30 100 100"}, 1000, "<>");
</script>
....
<div id='mydiv'></div>

我已经测试了该代码，它生成了一个工作表盘。它不像我上面链接的另一个示例那么漂亮，但它不使用任何外部图形，并且完全使用 Javascript 完成。唯一的外部依赖是 Raphael 库。

它显然需要一些工作来改进它以使其可用于您的场景，但这对您来说应该是一个相当好的开始。

希望对您有所帮助。

[编辑]

以上脚本适用于 Raphael v1.5。但是，Raphael v2 稍微改变了语法。

制作动画的行需要使用新的transform 语法，而不是已弃用的rotate 语法。所以编辑后的行如下所示：

indicator.animate({transform: "r30,100,100"}, 1000, "<>");

其余代码与上面相同。

有关transform 函数语法的更多信息，请参阅Raphael manual。

【讨论】：

【解决方案3】：

这个仪表库看起来不错并且运行良好

http://justgage.com/

【讨论】：

【解决方案4】：

你看到这个Open Source Gauge Component了吗？您可以使用大约 10 种不同的样式。

【讨论】：

这些是闪存量表，不是 JavaScript 或 Java Swing...
嗯，我想这取决于您使用它们的目的。

【解决方案5】：

对于 Swing，请查看开源 SteelSeries（由 Gerrit Grunwald 开发，别名 @hansolo）。它包含许多类型漂亮的仪表（和其他有趣的组件）。

【讨论】：