Android演进路线图--TWaver矢量小试

最新推荐文章于 2022-04-21 19:35:13 发布

原创

最新推荐文章于 2022-04-21 19:35:13 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5 #TWaver 3D #可视化 #3d #Android

本文展示了如何使用TWaver的矢量部分绘制一个Android系统的演进路线图，包括绘制bubble、添加动画、创建belt及标注年份，通过简单步骤完成了一个直观的RoadMap。读者可以通过结合矢量和动画进一步丰富视觉效果，或联系作者jeff.fu@servasoft.com寻求帮助。

还有半个多月就到春节了，年底相信很多公司都会进行年度总结以及公司发展状况总结，在这过程中难免会用到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,