Android Evolution Roadmap--twaver Vector mini-Test

Source: Internet
Author: User

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]

Android Evolution Roadmap--twaver Vector mini-Test

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.