java swing速度_绘制一个半量表/车速表（需要JavaScript Canvas或Java Swing示例）

我建议考虑在Raphael的Javascript图形库。它适用于所有浏览器(包括旧版本的IE！)，并使用矢量图形，因此它生成的图形可扩展且可旋转，而不会损失图像质量，甚至还包含动画功能。

但是，如果你想画你自己的，它不应该是很难用拉斐尔的事：它有绘制粒子和形状的能力，并为它们制作动画。看起来像你的例子的东西不应该很难实现。

下面是一些代码，我赶紧敲一起作为一个例子：

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, "<>");

....

我测试过的代码，并可以产生一个工作表盘。它并不像我上面链接的另一个例子那样漂亮，但它不使用任何外部图形，并且完全使用Javascript完成。唯一的外部依赖是拉斐尔图书馆。

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

希望有所帮助。

[编辑]

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

要执行动画的行需要使用新的transform语法，而不是使用已过时的rotate语法。所以编辑后的行看起来如下：

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

其余代码仍然与上面相同。

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