绘制半量规/速度表(需要JavaScript Canvas或Java Swing示例)

Question

有没有人javascript画布或java swing示例？

像这样的东西:http: //www.fmsinc.com/microsoftaccess/controls/components/gauges/gauge-half.gif

我该如何绘制"分隔符"线？

Answer 1

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

您可以获得的一些预览:

Answer 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 v1.5.但是,Raphael v2稍微改变了语法.

执行动画的行需要使用新transform语法而不是不推荐使用的rotate语法.所以编辑的行看起来如下:

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

其余代码与上面相同.

有关函数语法的更多信息,请参阅Raphael手册transform.

Answer 3

这个规格的lib看起来很好并且运行良好

http://justgage.com/

Answer 4

您见过这个开源仪表组件吗？您可以使用大约 10 种不同的样式。