Android演進路線圖--TWaver矢量小試

還有半個多月就到春節了，年底相信很多公司都會進行年度總結以及公司發展狀況總結，在這過程中難免會用到RoadMap，在這我們也使用TWaver的矢量部分繪製一個Android系統的發展歷程。先看效果：


什麼，最裏面Android 1.0的氣泡看不清？沒關係，放大下ok。

先來繪製一條road：

twaver.Util.registerImage('road', {
	w: 880,
	h: 370,  			
	origin:{ x: 0, y: 0 },
	v: [{
		shape: 'rect',
		rel: true,
		rect: [ 0, 0, 1, 1],
		lineColor:'red',
		lineWidth: 1,
		visible: debug,
	},{
		shape: 'path',
		data: 'M850,10C50,140,50,160,400,173C900,180,900,205,400,210C0,220,0,250,850,280L850,360C-50,290,-50,200,400,200C850,195,850,190,400,178C40,160,40,135,850,8z',
		fill:'#E3E3E3',
		lineWidth:0,
	}],
});

繪製一個bubble,可以添加一些動畫：

twaver.Util.registerImage('bubble', {
	w: 100,
	h: 120,  		
	origin:{ x: 0, y: 0 },
	scale: { x: '<%=getClient("scale")%>', y: '<%=getClient("scale")%>' },
	v: [{
		shape: 'rect',
		rel: true,
		rect: [ 0, 0, 1, 1],
		lineColor:'red',
		lineWidth: 1,
		visible: debug,
	},{
		shape: 'path',
		data: 'M50,100Q10,65,10,60C0,50,0,0,50,0C100,0,100,50,90,60Q90,65,50,100',
		fill:'<%=getClient("color")%>',
		lineWidth:0,
		rotate:0,
	},{
		shape: 'circle',
		cx: 49,
		cy: 48,
		r:42,
		startAngle: 180,
		endAngle: 360,
		fill:'#EFEFEF',
		lineWidth:0,
	},{
		shape: 'text',
		text: '<%=getClient("year")%>',
		x:50,
		y:110,
		fill:'white',
		textAlign: 'center',
		textBaseline: 'middle',
		font: '14px "Microsoft Yahei"',
	},{
		shape: 'text',
		text: '<%=getClient("title")%>',
		x:50,
		y:33,
		fill:'black',
		textAlign: 'center',
		textBaseline: 'middle',
		font: '16px "Microsoft Yahei" bold',
	},{
		shape: 'text',
		text: '<%=getClient("description")%>',
		x:50,
		y:60,
		fill:'white',
		textAlign: 'center',
		textBaseline: 'middle',
		font: '10px "Microsoft Yahei"',
	}],
});

繪製belt:

twaver.Util.registerImage('belt', {
	w: 500,
	h: 400,  			
	origin:{ x: 0, y: 0 },
	v: [{
		shape: 'rect',
		rel: true,
		rect: [ 0, 0, 1, 1],
		lineColor:'red',
		lineWidth: 1,
		visible: debug,
	},{
		shape: 'path',
		data: 'M30,50L400,50C500,50,500,200,400,200L100,200C0,200,0,350,100,350L450,350',
		lineColor:'#DDDDDD',
		lineWidth:34,
	},{
		shape: 'path',
		data: 'M30,50L30,33L15,33L30,50L15,67L30,67L30,50M449,330l15,20l-15,20',
		fill:'#DDDDDD',
		lineWidth:0,
	},{
		shape: 'path',
		data: 'M100,50L400,50C500,50,500,200,400,200L100,200C0,200,0,350,100,350L380,350',
		lineColor:'black',
		lineWidth:1.5,
	},{
		shape: 'path',
		data: 'M30,50L100,50M380,350L465,350',
		lineColor:'black',
		lineDash: [2, 3],
		lineWidth:1.5,
	}],
});

再添加年份以及一些文字:

twaver.Util.registerImage('egg', {
	w: 60,
	h: 60,  			
	origin: {x:0,y:0},
	v: [{
		shape: 'rect',	
		rel: true,
		rect: [ 0, 0, 1, 1],
		lineColor:'red',
		lineWidth: 1,
		visible: debug,
	},{
		shape: 'circle',
		rel: true,
		cx: 0.5,
		cy: 0.5,
		r: 25,
		fill:'#DDDDDD',
		lineWidth:0,
	},{
		shape: 'circle',
		rel: true,
		cx: 0.5,
		cy: 0.5,
		r: 18,
		fill:'<%=getClient("color")%>',
		lineWidth:0,
	},{
		shape: 'text',
		text: '<%=getClient("year")%>',
		rel:true,
		x:0.5,
		y:0.5,
		fill:'white',
		textAlign: 'center',
		textBaseline: 'middle',
		font: '12px "Microsoft Yahei" bold',
	}],
});

var createText=function(parent,title,text,x,y,left){
			var node = new twaver.Follower();			
			node.setHost(parent);
			node.setName(title);
			node.setStyle('label.color','#DF013A');
			node.setStyle('label.position','right.right');
			if(left){
				node.setStyle('label.position','right.left');
			}
			node.setStyle('label.font','bold 10px "Microsoft Yahei"');
			node.setImage(null);
			node.setLocation(x,y);
			box.add(node);
			var node = new twaver.Follower();			
			node.setHost(parent);
			node.setName(text);
			node.setStyle('label.color','black');
			node.setStyle('label.position','right.right');
			if(left){
				node.setStyle('label.position','right.left');
			}
			node.setStyle('label.font','10px "Microsoft Yahei"');
			node.setImage(null);
			node.setLocation(x,y+12);
			box.add(node);
		};
		createText(belt,'Android Bate','代表手機:HTC Dream（G1）',5,445);
		createText(belt,'Android 1.0系統發佈','代表手機:HTC Hero（G3）',90,365);
		createText(belt,'Android 2.0系統發佈','代表手機:摩托羅拉 Milestone ',185,445);
		createText(belt,'Android 2.3系統發佈','代表手機:三星 Galaxy II i9100 ',280,480);
		createText(belt,'Android 3.0系統發佈','代表手機:摩托羅拉 XOOM平板電腦',37,475);
		createText(belt,'Android 4.0系統發佈','代表手機:GALAXY Nexus',37,500);
		createText(belt,'Android 4.1/4.2/4.3系統發佈','代表手機:Nexus 7平板電腦',-65,585);
		createText(belt,'Android 4.4系統發佈','Nexus 4、Nexus 7、Nexus 10以及原生版HTC One、Galaxy S4SHIELD',36,684);
		createText(belt,'Android 5.0系統發佈','Nexus 6、Nexus 9平板及 Nexus Player ',135,605);

這樣一個簡單的RoadMap就製作完成了，是不是很簡單。我們依然可以將矢量+動畫相結合製作出更加豐富的RoadMap，後續我們也不斷退出一些更加豐富的RoadMap，當然也歡迎您來一試身手,如果有需求,可以郵件聯繫我們。
[email protected]