Twaver Vector Small Test--android Evolution Roadmap

There are more than half a month to the Spring Festival, the end of the year believe that many companies will be the annual summary and the company's development summary, in this process will inevitably use roadmap, in this we also use the vector part of Twaver to draw an Android system development process. First look at the effect:


What, most of the bubbles in Android 1.0 don't look clear? No problem, zoom in OK.

To draw a road first:

Twaver. Util.registerimage (' road ', {w:880,h:370,  origin:{x:0, y:0},v: [{shape: ' rect ', Rel:true,rect: [0, 0, 1, 1],line Color: ' 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,}],});

　　

To draw a bubble, you can add some animations:

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 "',}],});

　　

Draw Belt:

Twaver. Util.registerimage (' belt ', {w:500,h:400,  origin:{x:0, y:0},v: [{shape: ' rect ', Rel:true,rect: [0, 0, 1, 1],line Color: ' 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,}],});

Then add the year and some text:

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 ', ' on behalf of Mobile: HTC Dream (G1) ', 5,445); CreateText (Belt, ' Android 1.0 system released ', ' Representative Mobile: HTC Hero (G3) ', 90,365); CreateText (Belt, ' Android 2.0 system release ', ' on behalf of Mobile: Motorola Milestone ', 185,445); CreateText (Belt, ' Android 2.3 system released ', ' on behalf of Mobile: Samsung Galaxy II i9100 ', 280,480); CreateText (belt, ' Android 3.0 system release ', ' representative handMachine: Motorola Xoom Tablet PC ', 37,475); CreateText (Belt, ' Android 4.0 system release ', ' on behalf of Mobile: GALAXY Nexus ', 37,500); CreateText (Belt, ' Android 4.1/4.2/4.3 system release ', ' on behalf of Mobile: Nexus 7 tablet ', -65,585); CreateText (Belt, ' Android 4.4 system release ', ' Nexus 4, Nexus 7, Nexus 10, and native HTC One , Galaxy S4shield ', 36,684); CreateText (Belt, ' Android 5.0 system release ', ' Nexus 6, Nexus 9 tablet and Nexus Player ', 135,605);

　　

Such a simple roadmap is finished, is not very simple. We can still combine the vector + animation to create a richer roadmap, follow-up We also continue to quit some more rich roadmap, of course, you are welcome to try your skill, if there is demand, you can email us.
[Email protected]

Twaver Vector Small Test--android Evolution Roadmap