UI设计图如下:
1、前期准备:
canvas基础传送门:http://www.w3school.com.cn/html5/html_5_canvas.asp
注意两个必定会用到的实例:线条和圆
2、函数参数设想
我们来假设,最后有一个函数,名字叫做trace,当我们【trace(XXXXX);】之后,飒的一下,最终的进度反馈图就在页面上渲染出来了。那么这个函数,我应该要给它什么数据作为参数让它去生成最终的结果呢?
大伙们可以根据自己的情况具体分析,我这里给出我的参数:
trace({
"row_number":3,//每行有几个圆
"col_number":4,//每列有几个圆
"total_number":12,//一共有多少个圆
"datainit":[
{"name":"接单","time":"XX-XX-XX XX:XX"},
{"name":"订舱","time":"XX-XX-XX XX:XX"},
{"name":"提箱","time":"XX-XX-XX XX:XX"},
{"name":"进场","time":"XX-XX-XX XX:XX"},
{"name":"申报","time":""},
{"name":"放行","time":""},
{"name":"对单","time":""},
{"name":"签发","time":""},
{"name":"对账","time":""},
{"name":"付款","time":""},
{"name":"开船","time":""},
{"name":"到港","time":""},
]
});
我的参数就是一个json对象,这个对象中的datainit属性又是一个json数组,友情来一个json基本语法的传送门:http://www.w3school.com.cn/json/json_syntax.asp
这些参数是用来告诉函数反馈图的基本信息——这个反馈图应该长什么样子。。具体的节点有哪些。。。。
3、任务分解和实现
我们可以很自然地认为,假设这个反馈图有x个节点,那么我们就可以通过一个长度为x的循环来渲染出这个反馈图,基于这个前提,我们要找出不同位置上的点和线的组合具有哪些特征、一共有多少种不同的点线组合。
我划分出了五种:
①只有一个点
②竖线+点
③“u”形线+点
④点+竖线
⑤“n”形线+点
现在我们已经将整个进度反馈图做了相应的分隔,接下来的问题实际上是数学上的找规律了:将循环的下标和五个状态关联起来,比如说,当下标index=1时,我们就用①来进行渲染,当index=2时,就用②来进行渲染(每次循环要根据情况更新一下坐标值)。
function getStatus(index,col_number){
if(index==1)
return 1;
else
{
if(!chk(index/col_number+1))
{
if(index%col_number==0)
status=4;
else{
if(index%col_number==1)
status=5;
else
status=2;
}
}
else
{
if(index%col_number==0)
status=2;
else
{
if(index%col_number==1)
status=3;
else
status=4;
}
}
return status;
}
}
接下来,就是根据不同的状态值status来对画布进行对应的渲染,以下是status为1时的代码段:
for(var index=1;index<=data.total_number;++index){
var status=getStatus(index,data.col_number);
if(status==1){
var name=data.datainit[index-1].name;
var time=data.datainit[index-1].time;
if(time=="")//如果是未完成的流程,那么文字的颜色为灰色
{
context.fillStyle="rgb(200,200,200)";
}
context.beginPath();
context.arc(x,y,10,0,Math.PI*2,true);
context.closePath();
context.fill();
context.font = "15px 微软雅黑";
context.textBaseline = 'top';
context.fillText(name, x+15, y-10);
context.font = "10px 微软雅黑";
context.textBaseline = 'top';
context.fillText(time, x+15, y+10);
}
}
大致的思路如上所述,之后我会放上github源码的地址。