绘制半仪表/速度计（需要 JavaScript Canvas 或 Java Swing 示例）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5083221/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Drawing a half gauge/speedometer (JavaScript Canvas or Java Swing Example needed)
提问by user547064
has anyone a javascript canvas or java swing example?
有人有 javascript canvas 或 java swing 示例吗？
Something like this: http://www.fmsinc.com/microsoftaccess/controls/components/gauges/gauge-half.gif
像这样：http: //www.fmsinc.com/microsoftaccess/controls/components/gauges/gauge-half.gif
How should i draw the "separator" lines?
我应该如何绘制“分隔符”线？
回答by berni
If you want a simple JavaScript canvas based gauge you can use a little lib that I've created myself. It is easy to use and has a wyswig configurator for easy gauge customization. I've pushed it to the GitHub at http://bernii.github.com/gauge.js
如果你想要一个简单的基于 JavaScript 画布的仪表，你可以使用我自己创建的一个小库。它易于使用，并具有 wyswig 配置器，可轻松定制仪表。我已将其推送到 GitHub 上的http://bernii.github.com/gauge.js
A little preview of what you can get:
您可以获得的一些预览：
回答by Spudley
I recommend looking into the RaphaelJavascript graphics library. It works in all browsers (including old versions of IE!), and uses vector graphics, so the graphics it produces are scalable and rotatable without loss of image quality, and it even includes animation features.
我建议查看RaphaelJavascript 图形库。它适用于所有浏览器（包括旧版本的 IE！），并使用矢量图形，因此它生成的图形可缩放和旋转而不会损失图像质量，甚至包括动画功能。
Here's a link to a guy who's used Raphael to produce some very good-looking gauges: http://techoctave.com/c7/posts/17-jquery-dashboard-gauges-using-raphael-xhtml-and-css
这是一个使用 Raphael 制作一些非常漂亮的仪表的人的链接：http: //techoctave.com/c7/posts/17-jquery-dashboard-gauges-using-raphael-xhtml-and-css
But if you want to draw your own, it shouldn't be hard to do using Raphael: It has the ability to draw cicles and shapes, and to animate them. Something that looks like your example shouldn't be hard to achieve.
但是如果你想自己画画，使用 Raphael 应该不难：它能够绘制圆环和形状，并为它们设置动画。看起来像你的例子应该不难实现。
Here's some code I've knocked together quickly as an example:
以下是我快速拼凑的一些代码作为示例：
<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>
I've tested that code, and it produces a working dial. It's not as pretty as, say, the other example I linked above, but it doesn't use any external graphics, and it's done entirely using Javascript. The only external dependancy is the Raphael library.
我已经测试过那个代码，它产生了一个工作拨号。它不像我上面链接的另一个例子那么漂亮，但它不使用任何外部图形，并且完全使用 Javascript 完成。唯一的外部依赖是 Raphael 库。
It'll obviously need some work to improve it to make it usable for your scenario, but it should be a fairly good start for you.
显然需要一些工作来改进它以使其适用于您的场景，但这对您来说应该是一个相当好的开始。
Hope that helps.
希望有帮助。
[EDIT]
[编辑]
The above script works for Raphael v1.5. However, Raphael v2 changes the syntax slightly.
上述脚本适用于 Raphael v1.5。然而，Raphael v2 稍微改变了语法。
The line to do the animation needs to use the new transformsyntax rather than the deprecated rotatesyntax. So the edited line would look as follows:
执行动画的行需要使用新transform语法而不是不推荐使用的rotate语法。因此，编辑后的行将如下所示：
indicator.animate({transform: "r30,100,100"}, 1000, "<>");
The rest of the code remains the same as above.
其余代码与上面相同。
See the Raphael manualfor more information on the syntax of the transformfunction.
有关函数语法的更多信息，请参阅Raphael 手册transform。
回答by Nati Krisi
回答by Dutchie432
Have you seen this Open Source Gauge Component? There are about 10 different styles you can use.
你见过这个开源仪表组件吗？您可以使用大约 10 种不同的样式。
回答by kleopatra
For Swing, have a look at the open source SteelSeries(developed by Gerrit Grunwald, alias @hansolo). It contains many types of nice looking gauges (and other fun components).
对于 Swing，请查看开源SteelSeries（由 Gerrit Grunwald 开发，别名 @hansolo）。它包含许多类型的漂亮仪表（和其他有趣的组件）。
