让我们讨论第一项，时间线控件。
这将是一系列自定义视图，一个用于标注（一个三角形和一个带有文本的矩形按钮），一个时间线（单行和点数组），以及一个可以接受列表的环绕视图在时间线上绘制的名称。
每个视图都负责绘制自己。视图可以使用 psd 中的拼接图像，或者实际绘制自身。就尝试开发跨平台代码而言，这是可以做到的，但这通常意味着您必须在每个平台上接受许多妥协。
作为替代方案，您可以在界面中使用 html5 视图，并使用本机代码来连接业务逻辑。
这是一个使用 javascript 画布创建标注的粗略示例。
http://jsfiddle.net/5ZMn9/7/
function Callout() {
this.x = 0;
this.y = 0;
this.width = 0;
this.height = 0;
this.position = 1;
this.name = "";
}
Callout.prototype = {
draw: function(canvas) {
var callout = this;
canvas.drawPolygon({
fillStyle: 'blue',
x: callout.x, y: callout.y-12+callout.position*25,
radius: 5,
sides: 3,
rotate: (callout.position)*180
});
canvas.drawRect({
fillStyle: 'blue',
x: callout.x, y: callout.y,
width: 50,
height: 20
});
canvas.drawText({
fillStyle: '#fff',
x: callout.x, y: callout.y+2,
fontSize: 8,
fontFamily: 'Verdana, sans-serif',
text: callout.name
});
}
};
function Timeline() {
this.x = 0;
this.y = 0;
this.length = 0;
this.stops = 0;
}
Timeline.prototype = {
draw: function(canvas) {
var timeline = this;
canvas.drawLine({
strokeStyle: '#960',
strokeWidth: 2,
x1: timeline.x, y1: timeline.y,
x2: timeline.x+timeline.length, y2: timeline.y
});
for ( var i=0; i < this.stops; i++) {
canvas.drawEllipse({
fillStyle: '#c90',
x: timeline.x+30+50*i, y: timeline.y,
width: 8, height: 8
});
}
}
};
function Wrapper() {
this.names = [];
this.height = 300;
this.width = 600;
}
Wrapper.prototype = {
draw: function(canvas) {
$(canvas).clearCanvas();
var timeline = new Timeline();
timeline.x = 0;
timeline.y = 45;
timeline.length = this.names.length*50+10;
timeline.stops = this.names.length;
timeline.draw(canvas);
for ( var i = 0; i<this.names.length; i++) {
var callout = new Callout();
callout.x = i*50+30;
callout.y = i%2*50+20;
callout.position = 1-i%2;
callout.name = this.names[i];
callout.width=90;
callout.draw(canvas);
}
}
};
var wrapper = new Wrapper();
wrapper.names = ["One","Two","Three","Four","Five"];
wrapper.draw($('canvas'));