HTML5 rotate 做仪表盘

HTML混合APP开发

2012-04-21

我们的项目中有关于数据仓库和挖掘，用户要求UI的界面需要仪表盘，我网上找了下，没有发现免费的HTML仪表盘，饼图啥图表的确很多，那就没有办法了，我和同事自己做了一个仪表盘，结果如下。

HTML5 rotate 做仪表盘

之后我们就来讨论下这个简单的仪表盘是怎么做的。我们先大致有一个想法，设定一个宽高2:1的canvas，仪表盘的半径就是canvas的高度，仪表盘需要的数据有上面分几个区域（一般是低中高三个区域，为了测试我们准备了四个区域），刻度线和文字，指针，和指针指向的值。

首先第一步自然是canvas的声明

之后的工作都在javascript中完成，我们需要定义一些对象

这个panel就是我们的仪表盘对象，参数的id是canvas元素，option是我们需要提交给仪表盘的一些参数值。这个option的定义如下：option对象可以扩展，你可以通过optin定制更加自由强大的仪表盘对象的。

在绘制元素的时候，我们常常需要保存和恢复现场，特别当我们使用转移，旋转等方法的时候，一定要记得先save最后restore。为了方便，我们编写了一个save函数提供这个方式，这个模式类似C#中的委托，和设计模式中的观察着模式

上面这个save可以方便的帮助我们保存和回复现场。

我们定义个用于画半圆的方法，这个方法中，我们将需要画半圆时做的translate放到save函数中，这样画半圆的变形操作不会对其他操作有影响。

panel.prototype.drawArc = function() {
var p = this;
var cvs = this.cvs;
p.save(function() {
cvs.translate(p.width / 2, p.height); //将坐标点移到矩形的底部的中间
cvs.beginPath();
cvs.lineWidth = p.outsideStyle.lineWidth;
cvs.strokeStyle = p.outsideStyle.color;
cvs.arc(0, 0, p.height - cvs.lineWidth, 0, Math.PI / 180 * 180, true); //画半圆
cvs.stroke();
});
}

然后我们绘制中间颜色的填充区域

panel.prototype.drawLevelArea = function(level) {
var p = this;
var cvs = this.cvs;
for (var i = 0; i < level.length; i++) {
p.save(function() {
cvs.translate(p.width / 2, p.height);
cvs.rotate(Math.PI / 180 * level[i].start);
p.save(function() {
cvs.beginPath();
cvs.arc(0, 0, p.height - p.outsideStyle.lineWidth, Math.PI / 180 * 180, Math.PI / 180 * 360);
cvs.fillStyle = level[i].color;
cvs.fill();
});
});
}
}