??xml version="1.0" encoding="utf-8" standalone="yes"?>亚洲色欲色欲www,亚洲大片免费观看,亚洲欧美黑人猛交群http://www.tkk7.com/TWaver/archive/2017/05/31/432564.htmlTWaverTWaverWed, 31 May 2017 08:45:00 GMThttp://www.tkk7.com/TWaver/archive/2017/05/31/432564.htmlhttp://www.tkk7.com/TWaver/comments/432564.htmlhttp://www.tkk7.com/TWaver/archive/2017/05/31/432564.html#Feedback0http://www.tkk7.com/TWaver/comments/commentRss/432564.htmlhttp://www.tkk7.com/TWaver/services/trackbacks/432564.htmlVR技术在数据中心3D机房中的应用Q上Q?nbsp; 

 

前两天跟朋友A吃饭Q吃着吃着pCVR。近几年来,VR技术越来越火,感觉能跟VR沄边的都特别高大上Q朋?/span>A也是Q一提到VRQ就怎么都掩盖不住他发自的敬C情。好吧,作ؓ(f)一个技术宅Q我觉得是时候说点跟VR相关的事儿了?/span>

 

VRQ也是 virtual reality的羃写,全称是虚拟现实。从字面上理解,是q种技术能把现实中的一切实物用模型建造出来,再通过一些硬件设备的Ҏ(gu)Q把你的w体攑֜q个虚拟场景当中Q甚x用一些不属于人类本n的视角去看这个世界?br />

举个栗子?/span>Google earth已经在去qؓ(f)自己的品提供了全方位的VR技术支持?/span>

地球的图片大安见过吧?可是w处瀚宇宙中ȝq颗我们赖以生存的星球,q样的体验你你有q吗Q?br />

再比如,怿大家都爬q山Q我也是d爱好者。每ơ爬山都觉得山顶高不可及(qing)Q篏到气喘吁吁也只有仰望的䆾。但是让自己像雄Chq一座山顶Q俯瞰山川,q样的视觉效应是不是也让人心痒痒呢?

所以简单地_(d)VR是q样一U技术,能让你有一些超hc视角本w的体验?/span>


说完VR是什么,再来谈一?/span>VR怎么实现吧。用最单粗暴的方式来说Q无非就是一Q硬Ӟ二:(x)内容Q技术支持)?/span>

 

现在市面上有很多VRgQ大致可以分Zc:(x)VR眼镜?/span>VR一体机?/span>VR头盔?/span>

 

VR眼镜

如果你预有限,只是想体验一?/span>VRQ看看电(sh)影,玩玩游戏,可以考虑VR眼镜?/span>VR眼镜又细分ؓ(f)2c:(x)入门U和q阶版?/span>

 

入门U的VR眼镜是个盒子,里面?/span>2个镜片,放一个手去,代表作有h?/span>Cardboard、小c?/span>VR玩具版等Q需要手动调焦,延迟和眩晕感都很严重?/span>



q阶版的VR眼镜有运动传感器Q对手机g做了优化Qgq和眩晕感比入门U的低。一般会(x)配备一个控制器Q类似鼠标,有了控制器就不需要用脑袋交互了,用控制器可以交互。代表作有三星的Gear VR、谷歌的Daydream View、小c?/span>VR眼镜{。这c?/span>VR眼镜一般只支持自家的手机。如果手上正好有q样的手机,可以C对应?/span>VR眼镜尝鲜?br />

一c?/span>VR眼镜L(fng)兼容各种型号的手机,VR沉浸感比q阶版的差一些,原因是没有针对具体手Z化,代表作有暴风、大朋等。h(hun)格比入门U的几十块的贵,比进阶版的便宜?/span>


VR一体机

单讲是VR眼镜内置了手机,代表作有暴风镜一体机Matrix、大?/span>VR一体机M2{。现阶段不徏议购?/span>VR一体机。不q这ơ谷歌在q次IO大会(x)上发布的Q跟HTC和联惛_作的Daydream Standalone VR值得期待Q据说用了h最新的WorldSense技术,可以不需要外部定位设备,pq踪头部的位|,而不仅仅是头部的旋{ 

VR头盔

需要用HDMI视频U连接高性能PCLQ也是?/span>PCL的显卡输频信号到VR头盔里。另外这c设备一般配备定位装|,能感知头盔、手柄的位置、方向、加速度{。如果你是游戏发烧友Q强烈推?/span>VR头盔。代表作有早期的HTC Vive?/span>Oculus Rift、烦(ch)?/span>PlayStation VRQ以?qing)国内的后来者大?/span>VR头盔E3、蚁视二代头盔、小z?/span>4K?/span>hypereal?/span>Pano{?br />

 

 

VR头盔的优势很明显Qgq小Q有定位装置Q但中不的是必须拖一根视频线Q在VR世界中O游时L?x)不心被这根线~住Q而且VR头盔普遍比较重。不q去q双11期间HTC推出?/span>TPCAST VIVE无线升套g?/span>VR头盔摆脱了这根线的束~,不过也有报道?/span>2?/span>TPCST之间有干扎ͼ而且待机旉也是个问题?/span>



׃VR眼镜?/span>VR一体机都是借助于手机呈?/span>3D内容Q性能都没法满x据中心可视化的要求,而且没有很好的定位方案,Z最好的视觉和交互体验,我们采用了由HTC?/span>Valve共同研发?/span>VIVE?/span>

 

谈完VRgQ再来谈?/span>VR内容。面向消费者的VR内容可以分ؓ(f)Q游戏、全景视频、全景直播、全景图片等Q面向企业的VR内容很多了Q在教育、军事、医疗、旅游、房C、健w、室内装修、商品展C等领域都有应用?/span>

 

另外VR内容的制作分两类Q全景拍摄和3D建模。全景拍摄可以生产出全景视频、全景直播、全景图片等Q全景图片可以加工成VR应用Q用户只能在几个固定的点中移动,不能?/span>3D场景中随意行走。游戏?/span>TWaver数据中心可视化Y件等Q都需?/span>3D建模。前面栗子中提到?/span>Google Earth VRl合了全景拍摄和3D建模Q属于黑U技产品Q可以戳链接亲n体验一下?/span>

 

 Google Earth VR

https://vr.google.com/earth/

支持HTC Vive?/span>Oculus Rift

Steam下蝲地址Q?/span>

http://store.steampowered.com/app/348250/

如果你碰到如下提C:(x)

This item is currently unavailable in your region

可以?/span>IE或?/span>Edge中输入如下地址卛_安装

steam://install/348250

如果你在启动Google Earth VR时碰到如下提C:(x)

loading labels failed due to an unknown error

说明你和google服务器之间有障碍Q请U学上网

Google Earth VR是谷?/span>10几年前发布的Google Earth?/span>VR版,让你不出户p领略世界各地的自焉光?br />

交互上最大的亮点是在城市中穿梭时Q只有中心画面在动,边缘画面被虚化,出现了不动的|格Q谷歌管q个tunnel vision。这样你׃(x)感觉自己站在原定不动Q只是眼前的画面在动Q就像看?sh)?jing)似的Q好处是既不?x)像真正的飞行那栯Z生眩晕感Q也不像teleport那样得不到连l的场景变化效果?br />

可惜的是国内是一马^?br />

 

除了Google earth VR之外Q还有一些我个h觉得q不错的产品Q比如:(x)

 The Lab

支持HTC Vive?/span>Oculus Rift

Steam下蝲地址Q?/span>

http://store.steampowered.com/app/450390/The_Lab/

q款游戏包含?/span>8个小游戏Q是Valve?/span>VR游戏领域的试水作品。进?/span>VR世界后,以往PC的交互方式都q时了,Valve的工作h员尝试了各种交互方式Q让VR游戏体验更真实。更多关于这ƾ游戏的开发历E,可以ULq里Q?/span>

https://www.youtube.com/watch?v=rtotczP5DrI


比较搞笑的问题是Q我也试q,哈哈Q:(x)



 

q有q个也可以尝试着玩一把:(x)

 SteamVR Home

SteamVR Home?/span>Steamq_推出?/span>SteamVR应用启动q_Q玩家可以定制自qUhI间Q和其他玩家交互Q打开?/span>VRC交应用的新章?/span>

安装Ҏ(gu)Q打开SteamQ在Library中的Tools中找?/span>Steam VRQ右键选择PropertiesQ在Betas늭中选择SteamVR Beta

更多关于SteamVR Home的介l可以参考这里:(x)

https://steamcommunity.com/games/250820/announcements/detail/1256913672017157095

按着手柄的方向按钮可以在戉K内蟩跃:(x)

q入特定的区域(有字?/span>i的地方)后,比如门前和花园前Q会(x)出来菜单Q可以自定义场景Q?br />


今天先说到q儿吧,明儿下班再给大家侃点更酷炫的Q)




TWaver 2017-05-31 16:45 发表评论
]]>
HTML5数据可视化第四弹Q可交互地铁U\?/title><link>http://www.tkk7.com/TWaver/archive/2016/12/13/432072.html</link><dc:creator>TWaver</dc:creator><author>TWaver</author><pubDate>Tue, 13 Dec 2016 06:36:00 GMT</pubDate><guid>http://www.tkk7.com/TWaver/archive/2016/12/13/432072.html</guid><wfw:comment>http://www.tkk7.com/TWaver/comments/432072.html</wfw:comment><comments>http://www.tkk7.com/TWaver/archive/2016/12/13/432072.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.tkk7.com/TWaver/comments/commentRss/432072.html</wfw:commentRss><trackback:ping>http://www.tkk7.com/TWaver/services/trackbacks/432072.html</trackback:ping><description><![CDATA[<div><p><span id="wmd-input-section-3"><span h1"=""><span md-hash"="" md=""><strong>前言</strong></span></span></span></p><p> </p><p><span id="wmd-input-section-3"><span h1"=""><span md-hash"="" md=""><span lf"=""><span p"="">最q特别忙Q承蒙大伙关照,3D机房的项目一个接着一个,领了一帮小弟,搞搞传帮?#8230;…有个弟很不错,勤奋好学Q很快就把API都摸透了Q自己折腄做了个HTML5的魔都的地铁U\图,能拖能拽的,q和?sh)子地图做了交互。哥军_把小弟的成果l大家展CZ下?/span></span></span></span></span></p><p> </p><p><strong><span id="wmd-input-section-3"><span h1"=""><span md-hash"="" md=""><span lf"=""><span p"=""><span link"=""><span md="" md-bracket-start"=""><span md="" md-underlined-text"=""><span md="" md-bracket-end"=""><span md="" md-href"=""><span md="" md-paren-end"=""><span lf"=""><span id="wmd-input-section-4"><span h1"=""><span md-hash"="" md="">效果囑֯?/span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></strong></p><p> </p><p><span id="wmd-input-section-3"><span h1"=""><span md-hash"="" md=""><span lf"=""><span p"=""><span link"=""><span md="" md-bracket-start"=""><span md="" md-underlined-text"=""><span md="" md-bracket-end"=""><span md="" md-href"=""><span md="" md-paren-end"=""><span lf"=""><span id="wmd-input-section-4"><span h1"=""><span md-hash"="" md=""><span lf"=""><span p"="">|上的地铁图q是很多的,弟选了q张比较新的做参考。想当年哥来都打拼Ӟ图上可就一U一l打个叉……暴露q龄的话不多_(d)看图Q?/span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p><p><span h1"=""><span md-hash"="" md=""><span lf"=""><span p"=""><span link"=""><span md="" md-bracket-start"=""><span md="" md-underlined-text"=""><span md="" md-bracket-end"=""><span md="" md-href"=""><span md="" md-paren-end"=""><span lf"=""><span><span h1"=""><span md-hash"="" md=""><span lf"=""><span p"=""><img alt="" src="http://images2015.cnblogs.com/blog/311983/201611/311983-20161103121614533-2062155906.jpg" /></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p><p><span p"="">再来看看弟做的Q?br /><br /></span></p><p><span p"=""><img alt="" src="http://images2015.cnblogs.com/blog/311983/201611/311983-20161103121656721-376610979.jpg" /></span></p><p><span p"="">我是一眼看不出区别Q但q可不是一张效果图Q而是一个新手仅用了几天做出来的东西Q而且里面许多化和调整是通过E序自动完成的,q就不容易了。更重要的是Q它q不是一张死图,而是U矢量、可交互、有动态效果、无q~放的拓扑图Q我们先单看一下交互效果,后面可以详细说说代码的实现?/span></p><p> </p><p><strong><span p"="">文本提示弹弹?/span></strong></p><p> </p><p><span p"=""><span p"="">首先Q把鼠标Ud站点、\Dc(din)图标等位置Q都?x)有文本提示弹出Q这个比较基本,癑ֺ家的有Q小弟也放了比较简单的弹出内容。如果加上基本介l啊、相xC啊、周边信息啊……要是加上q告Q就可以赚钱?#8230;…反正什么都可以加嘛Q就是一个setToolTip命o(h)而已?/span></span></p><p> </p><p><img alt="" src="http://images2015.cnblogs.com/blog/311983/201611/311983-20161103121921361-1178958456.gif" /></p><p> </p><p><strong>站点图标变变?/strong></p><p> </p><p><span p"="">当鼠标移到站点上Ӟ站点图标做了攑֤效果Q这个效果很贴心Q看了下癑ֺӞ用的是发光效果?/span></p><p> </p><p><span p"=""><img alt="" src="http://images2015.cnblogs.com/blog/311983/201611/311983-20161103122154049-1255275872.gif" /></span></p><p> </p><p><span p"="">实现的方法也很简便,是在注册站点矢量图形时Q加入了动态判断。以下注册普通站点矢量图形的代码Q?/span></p></div><strong></strong><br /><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #000000; ">twaver.Util.registerImage(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">station</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,{<br />    w: linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">1.6</span><span style="color: #000000; ">,<br />    h: linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">1.6</span><span style="color: #000000; ">,<br />    v: function (data, view) {<br />        var result </span><span style="color: #000000; ">=</span><span style="color: #000000; "> [];<br />        </span><span style="color: #0000FF; ">if</span><span style="color: #000000; ">(data.getClient(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">focus</span><span style="color: #000000; ">'</span><span style="color: #000000; ">)){<br />            result.push({<br />                shape: </span><span style="color: #000000; ">'</span><span style="color: #000000; ">circle</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,<br />                r: linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">0.7</span><span style="color: #000000; ">,<br />                lineColor:  data.getClient(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">lineColor</span><span style="color: #000000; ">'</span><span style="color: #000000; ">),<br />                lineWidth: linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">0.2</span><span style="color: #000000; ">,<br />                fill: </span><span style="color: #000000; ">'</span><span style="color: #000000; ">white</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,<br />            });<br />            result.push({<br />                shape: </span><span style="color: #000000; ">'</span><span style="color: #000000; ">circle</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,<br />                r: linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">0.2</span><span style="color: #000000; ">,<br />                fill:  data.getClient(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">lineColor</span><span style="color: #000000; ">'</span><span style="color: #000000; ">),<br />            });<br />        }</span><span style="color: #0000FF; ">else</span><span style="color: #000000; ">{<br />            result.push({<br />                shape: </span><span style="color: #000000; ">'</span><span style="color: #000000; ">circle</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,<br />                r: linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">0.6</span><span style="color: #000000; ">,<br />                lineColor: data.getClient(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">lineColor</span><span style="color: #000000; ">'</span><span style="color: #000000; ">),<br />                lineWidth: linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">0.2</span><span style="color: #000000; ">,<br />                fill: </span><span style="color: #000000; ">'</span><span style="color: #000000; ">white</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,<br />            });<br />        }<br />        </span><span style="color: #0000FF; ">return</span><span style="color: #000000; "> result;<br />    }<br />});</span></div><br /><div><p><strong>动画效果拽拽?/strong></p><p> </p><p><span p"="">从上图还可以看到Q在换乘站图标中Q除了增加了颜色Q还实现了旋转效果。这个就U杀癑ֺ家了?span lf"=""> <span p"="">来看代码Q?/span></span></span></p></div><br /><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #000000; ">twaver.Util.registerImage(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">rotateArrow</span><span style="color: #000000; ">'</span><span style="color: #000000; ">, {<br />    w: </span><span style="color: #000000; ">124</span><span style="color: #000000; ">,<br />    h: </span><span style="color: #000000; ">124</span><span style="color: #000000; ">,<br />    v: [{<br />        shape: </span><span style="color: #000000; ">'</span><span style="color: #000000; ">vector</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,<br />        name: </span><span style="color: #000000; ">'</span><span style="color: #000000; ">doubleArrow</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,<br />        rotate: </span><span style="color: #000000; ">360</span><span style="color: #000000; ">,<br />        animate: [{<br />            attr: </span><span style="color: #000000; ">'</span><span style="color: #000000; ">rotate</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,<br />            to: </span><span style="color: #000000; ">0</span><span style="color: #000000; ">,<br />            dur: </span><span style="color: #000000; ">2000</span><span style="color: #000000; ">,<br />            reverse: </span><span style="color: #0000FF; ">false</span><span style="color: #000000; ">,<br />            repeat: Number.POSITIVE_INFINITY<br />        }]<br />    }]<br />});</span></div><br /><div><p><span p"="">当然q对于TWaver来说也很Ҏ(gu)Q只不过对rotate属性进行了动态改变而已?span lf"=""> <span lf"=""><span p"="">另外Q在单击和双ȝҎ(gu)Q还实现了selected和loading的动L果,值得点赞Q?/span></span></span></span></p><p> </p><p><span p"=""><span lf"=""><span lf"=""><span p"=""><img alt="" src="http://images2015.cnblogs.com/blog/311983/201611/311983-20161103141545565-2010504104.gif" /><img alt="" src="http://images2015.cnblogs.com/blog/311983/201611/311983-20161103141605065-1237423734.gif" /></span></span></span></span></p><p> </p><p> </p><p><strong>混合~放炫炫?/strong></p><p> </p><p><span p"="">无失真羃放是矢量囄先天优势Q小弟也掌握得炉火纯青,把TWaver的؜合羃放模式用到极_(d)q有~放比例控制、文字自动隐藏等功能,方便订制?/span></p><p> </p><p><span p"=""><img alt="" src="http://images2015.cnblogs.com/blog/311983/201611/311983-20161103141731096-1466288424.gif" /></span></p><p> </p><p><span p"="">代码也不复杂Q?/span></p></div><br /><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #000000; ">network.setZoomManager(</span><span style="color: #0000FF; ">new</span><span style="color: #000000; "> twaver.vector.MixedZoomManager(network));<br />network.setMinZoom(</span><span style="color: #000000; ">0.2</span><span style="color: #000000; ">);<br />network.setMaxZoom(</span><span style="color: #000000; ">3</span><span style="color: #000000; ">);<br />network.setZoomVisibilityThresholds({<br />    label : </span><span style="color: #000000; ">0.6</span><span style="color: #000000; ">,<br />});</span></div><br /><div><p><strong>交互功能用v?/strong></p><p> </p><p><span p"="">弟很自豪地l我介绍q个功能Q图标可以自由拖动,村ּ后会(x)自动弹回。哥问小弟这有什么用Q他一本正l地_(d)(x)证明图是zȝQ?/span></p><p> </p><p><span p"=""><img alt="" src="http://images2015.cnblogs.com/blog/311983/201611/311983-20161103141931643-856207231.gif" /></span></p><p> </p><p> </p><p><span p"="">好吧你赢了,虽然是个没什么卵用的功能Q但闲的蛋疼的时候可以随便玩上几十分钟我也是信的?/span></p><p> </p><p><strong><span p"="">q箋单击同一站点</span></strong></p><p> </p><p><span p"=""><span p"="">q箋单击同一站点Q注意不是双击)Q可以将l过此站点的所有线路突出显C出来。小弟说加入q个功能Ua(b)因ؓ(f)单易做,?#8230;…竟然表示非常理解Q谁q轻时没耍过q类L又讨好的招数呢Q?/span></span></p><p> </p><p><span p"=""><span p"=""><img alt="" src="http://images2015.cnblogs.com/blog/311983/201611/311983-20161103143834486-1796262740.gif" /></span></span></p><p> </p><p> </p><p><strong>双击站点</strong></p><p> </p><p><span p"="">双击站点Q竟然弹Z本站周边的电(sh)子地图!知道引入他山之玉Q看来小子可教啊。我发现他的定位Ҏ(gu)Q有的是用经U度Q有的是关键词查询。小弟狡黠地_(d)开始是人工查每个站点经U度的,q了一D儿发现太麻?ch),后来改\子了。马大大说的Q懒人改变世界,我服!</span></p><p> </p><p><span p"=""><img alt="" src="http://images2015.cnblogs.com/blog/311983/201611/311983-20161103143940158-1173344247.gif" /></span></p><p> </p><p> </p><p><span p"="">最后来八一八程序设计的思\吧,弟是棵好苗子,能做出那么像L(fng)E序Q必然是深思熟虑过的。不惛_听我啰嗦的朋友,也可以直接发邮gl我Q?span link"=""><span md="" md-bracket-start"=""><span md="" md-underlined-text"="">tw-service@servasoft.com<span md="" md-bracket-end"=""><span md="" md-href"=""><span md="" md-paren-end"="">Q来鉴赏下小弟的成果?/span></span></span></span></span></span></span></p><p> </p><p><strong><span p"=""><span link"=""><span md="" md-bracket-start"=""><span md="" md-underlined-text"=""><span md="" md-bracket-end"=""><span md="" md-href"=""><span md="" md-paren-end"="">数据文g的整?/span></span></span></span></span></span></span></strong></p><p> </p><p><span p"=""><span link"=""><span md="" md-bracket-start"=""><span md="" md-underlined-text"=""><span md="" md-bracket-end"=""><span md="" md-href"=""><span md="" md-paren-end"=""><span p"="">数据格式Q选择了JavaScript原生支持的json文gQ直观方ѝ?span lf"=""> <span p"="">数据l构Q按照站炏V线路、杂三大块来组l,l构清晰Q利于遍历、查询等操作?/span></span></span></span></span></span></span></span></span></span></p><p> </p></div><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #000000; ">{<br />    </span><span style="color: #000000; ">"</span><span style="color: #000000; ">stations</span><span style="color: #000000; ">"</span><span style="color: #000000; ">:{<br />        </span><span style="color: #000000; ">"</span><span style="color: #000000; ">l01s01</span><span style="color: #000000; ">"</span><span style="color: #000000; ">:{ },<br />        …………<br />    }<br />    </span><span style="color: #000000; ">"</span><span style="color: #000000; ">lines</span><span style="color: #000000; ">"</span><span style="color: #000000; ">:{<br />        </span><span style="color: #000000; ">"</span><span style="color: #000000; ">l01</span><span style="color: #000000; ">"</span><span style="color: #000000; ">:{……},<br />        …………<br />    }<br />    </span><span style="color: #000000; ">"</span><span style="color: #000000; ">sundrys</span><span style="color: #000000; ">"</span><span style="color: #000000; ">:{<br />        </span><span style="color: #000000; ">"</span><span style="color: #000000; ">railwaystationshanghai</span><span style="color: #000000; ">"</span><span style="color: #000000; ">:{……},<br />        …………<br />    }<br />}</span></div><br /><div><span p"="">命名比较规范Q通过名字可以看出基本信息(例如“l01s01”是1L(fng)W?个站点)Q甚至直接利用名字就可以q行查询和遍历?/span></div><br /><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #000000; ">    </span><span style="color: #000000; ">"</span><span style="color: #000000; ">l01s01</span><span style="color: #000000; ">"</span><span style="color: #000000; ">:{<br />        </span><span style="color: #000000; ">"</span><span style="color: #000000; ">id</span><span style="color: #000000; ">"</span><span style="color: #000000; ">:</span><span style="color: #000000; ">"</span><span style="color: #000000; ">l01s01</span><span style="color: #000000; ">"</span><span style="color: #000000; ">,<br />        </span><span style="color: #000000; ">"</span><span style="color: #000000; ">name</span><span style="color: #000000; ">"</span><span style="color: #000000; ">:</span><span style="color: #000000; ">"</span><span style="color: #000000; ">莘庄</span><span style="color: #000000; ">"</span><span style="color: #000000; ">,<br />        </span><span style="color: #000000; ">"</span><span style="color: #000000; ">loc</span><span style="color: #000000; ">"</span><span style="color: #000000; ">:{</span><span style="color: #000000; ">"</span><span style="color: #000000; ">x</span><span style="color: #000000; ">"</span><span style="color: #000000; ">:</span><span style="color: #000000; ">419</span><span style="color: #000000; ">,</span><span style="color: #000000; ">"</span><span style="color: #000000; ">y</span><span style="color: #000000; ">"</span><span style="color: #000000; ">:</span><span style="color: #000000; ">1330</span><span style="color: #000000; ">},<br />        </span><span style="color: #000000; ">"</span><span style="color: #000000; ">label</span><span style="color: #000000; ">"</span><span style="color: #000000; ">:</span><span style="color: #000000; ">"</span><span style="color: #000000; ">bottomright.bottomright</span><span style="color: #000000; ">"</span><span style="color: #000000; ">,<br />    },<br />    …………</span></div><br /><div><p><strong>站点路线的创?/strong></p><p> </p><p><span p"="">首先是读取json文g的数据?/span></p></div><br /><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #000000; ">    function loadJSON(path,callback){<br />        var xhr </span><span style="color: #000000; ">=</span><span style="color: #000000; "> </span><span style="color: #0000FF; ">new</span><span style="color: #000000; "> XMLHttpRequest();<br />        xhr.onreadystatechange </span><span style="color: #000000; ">=</span><span style="color: #000000; "> function(){<br />            </span><span style="color: #0000FF; ">if</span><span style="color: #000000; "> (xhr.readyState </span><span style="color: #000000; ">===</span><span style="color: #000000; "> </span><span style="color: #000000; ">4</span><span style="color: #000000; ">) {<br />                </span><span style="color: #0000FF; ">if</span><span style="color: #000000; "> (xhr.status </span><span style="color: #000000; ">===</span><span style="color: #000000; "> </span><span style="color: #000000; ">200</span><span style="color: #000000; ">) {<br />                   dataJson </span><span style="color: #000000; ">=</span><span style="color: #000000; "> JSON.parse(xhr.responseText);<br />                   callback </span><span style="color: #000000; ">&&</span><span style="color: #000000; "> callback();<br />               }<br />           }<br />       };<br />       xhr.open(</span><span style="color: #000000; ">"</span><span style="color: #000000; ">GET</span><span style="color: #000000; ">"</span><span style="color: #000000; ">, path, </span><span style="color: #0000FF; ">true</span><span style="color: #000000; ">);<br />       xhr.send();<br />    }</span></div><br /><div><span p"="">因ؓ(f)d文g是一个异步的q程Q所以要E序的展开都要攑֜文gd函数的内部?/span></div><br /><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #000000; ">    function init(){<br />        loadJSON(</span><span style="color: #000000; ">"</span><span style="color: #000000; ">shanghaiMetro.json</span><span style="color: #000000; ">"</span><span style="color: #000000; ">, function(){<br />            initNetwork(dataJson);<br />            initNode(dataJson);<br />        });<br />    }</span></div><br /><div><span p"="">只要通过对站点进行一ơ遍历,车站的徏立就完成了?/span></div><br /><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #000000; ">    </span><span style="color: #0000FF; ">for</span><span style="color: #000000; ">(staId in json.stations){<br />        var station </span><span style="color: #000000; ">=</span><span style="color: #000000; "> json.stations[staId];<br />        staNode </span><span style="color: #000000; ">=</span><span style="color: #000000; "> </span><span style="color: #0000FF; ">new</span><span style="color: #000000; "> twaver.Node({<br />            id: staId,<br />            name: station.name,<br />            image:</span><span style="color: #000000; ">'</span><span style="color: #000000; ">station</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,<br />        });<br />        staNode.s(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">label.color</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,</span><span style="color: #000000; ">'</span><span style="color: #000000; ">rgba(99,99,99,1)</span><span style="color: #000000; ">'</span><span style="color: #000000; ">);<br />        staNode.s(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">label.font</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,</span><span style="color: #000000; ">'</span><span style="color: #000000; ">12px 微Y雅黑</span><span style="color: #000000; ">'</span><span style="color: #000000; ">);<br />        staNode.s(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">label.position</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,station.label);<br />        staNode.setClient(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">location</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,station.loc);<br />        box.add(staNode);<br />    }</span></div><br /><div><span p"="">再对数据文g中的各条U\下的所有站点进行遍历,在站炚w依次创徏Link?/span></div><br /><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #000000; ">    </span><span style="color: #0000FF; ">for</span><span style="color: #000000; ">(lineId in json.lines) {<br />        ……<br />        </span><span style="color: #0000FF; ">for</span><span style="color: #000000; ">(staSn in line.stations) {<br />            ……<br />            var link </span><span style="color: #000000; ">=</span><span style="color: #000000; "> </span><span style="color: #0000FF; ">new</span><span style="color: #000000; "> twaver.Link(linkId,prevSta,staNode);<br />            link.s(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">link.color</span><span style="color: #000000; ">'</span><span style="color: #000000; ">, line.color);<br />            link.s(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">link.width</span><span style="color: #000000; ">'</span><span style="color: #000000; ">, linkWidth);<br />            link.setToolTip(line.name);<br />            box.add(link);<br />        }<br />    }</span></div><br /><div><p><span p"="">再对label位置q行调整Q否则站点名UC(x)昄的很乱。小弟是通过在原始数据中手动加入位置信息来实现的Q稍昄了一点,应该可以通过E序自动判断站点周围I间来进行智能调整?span lf"=""> <span lf"=""><span p"="">最后再加入图标Q一张原始的地铁囑ְ呈现出来了?/span></span></span></span></p><p> </p><p><span p"=""><img alt="" src="http://images2015.cnblogs.com/blog/311983/201611/311983-20161103144715205-1780446914.png" /></span></p><p> </p><p> </p><p><strong>路线拐点的添?/strong></p><p> </p><p><span p"="">基本的示意功能已l具备了Q这里,弟让我很欣赏的一Ҏ(gu)没有此停止Q而是q一步做了调_(d)使线路只保留了横q竖直和正斜的走向,以达到整齐美观的效果。可能看h与参考图E稍有些不同Q主要因为各路段基本只添加了一个拐点,q样做既大大化了E序Q又基本保证了图形的观度。想q一点,做多一点,是块做品的好料子?/span></p><p> </p><p><span p"=""><img alt="" src="http://images2015.cnblogs.com/blog/311983/201611/311983-20161103144816315-1456837843.png" /></span></p><p> </p><p><span p"="">当然Z提高E序的灵zL,应对必须d两个或以上拐点的情况Q也使用了h工拐点的手段。不q这里h工拐点被设成一个隐形的节点Q可能利于智能拐点的判断Q但也有可能在\U操作时造成混ؕ。如何处理更好还可以q一步推敌Ӏ?/span></p></div><br /><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #000000; ">var createTurnSta </span><span style="color: #000000; ">=</span><span style="color: #000000; "> function(line, staSn){<br />    staTurn </span><span style="color: #000000; ">=</span><span style="color: #000000; "> </span><span style="color: #0000FF; ">new</span><span style="color: #000000; "> twaver.Node(staSn);<br />    staTurn.setImage();<br />    staTurn.setClient(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">lineColor</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,line.color);<br />    staTurn.setClient(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">lines</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,[line.id]);<br />    var loc </span><span style="color: #000000; ">=</span><span style="color: #000000; "> line.stations[staSn];<br />    staTurn.setClient(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">location</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,loc);<br />    box.add(staTurn);<br />    </span><span style="color: #0000FF; ">return</span><span style="color: #000000; "> staTurn;<br />}</span></div><br /><div><p><strong>接点位置的调?/strong></p><p> </p><p><span p"="">大家可以看到Qƈ不是所有\D都直接q入站点中心Q在许多情况下必要q行偏移?/span></p></div><br /><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #000000; ">var createFollowSta </span><span style="color: #000000; ">=</span><span style="color: #000000; "> function(json, line, staNode, staId){<br />    staFollow </span><span style="color: #000000; ">=</span><span style="color: #000000; "> </span><span style="color: #0000FF; ">new</span><span style="color: #000000; "> twaver.Follower(staId);<br />    staFollow.setImage();<br />    staFollow.setClient(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">lineColor</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,line.color);<br />    staFollow.setClient(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">lines</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,[line.id]);<br />    staFollow.setHost(staNode);<br />    var az </span><span style="color: #000000; ">=</span><span style="color: #000000; "> azimuth[staId.substr(</span><span style="color: #000000; ">6</span><span style="color: #000000; ">,</span><span style="color: #000000; ">2</span><span style="color: #000000; ">)];<br />    var loc0 </span><span style="color: #000000; ">=</span><span style="color: #000000; "> json.stations[staId.substr(</span><span style="color: #000000; ">0</span><span style="color: #000000; ">,</span><span style="color: #000000; ">6</span><span style="color: #000000; ">)].loc;<br />    var loc </span><span style="color: #000000; ">=</span><span style="color: #000000; "> {x:loc0.x</span><span style="color: #000000; ">+</span><span style="color: #000000; ">az.x, y:loc0.y</span><span style="color: #000000; ">+</span><span style="color: #000000; ">az.y};<br />    staFollow.setClient(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">location</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,loc);<br />    box.add(staFollow);<br />    </span><span style="color: #0000FF; ">return</span><span style="color: #000000; "> staFollow;<br />}</span></div><br /><div><p> </p><p><img alt="" src="http://images2015.cnblogs.com/blog/311983/201611/311983-20161103144955643-1549309486.png" /></p><p> </p><p><span p"="">弟采取了虚拟节点的办法Q就是在站点的旁边,d一个FollowerQ但q不昄出来Q,让ƈ行的不同U\q接C同的Follower上。通过调整Follower的位|,来实现线路与站点q接点的控制?/span></p></div><br /><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #000000; ">var azimuth </span><span style="color: #000000; ">=</span><span style="color: #000000; "> {<br />    bb: {x: </span><span style="color: #000000; ">0</span><span style="color: #000000; ">, y: linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">zoom</span><span style="color: #000000; ">/</span><span style="color: #000000; ">2</span><span style="color: #000000; ">},<br />    tt: {x: </span><span style="color: #000000; ">0</span><span style="color: #000000; ">, y: </span><span style="color: #000000; ">-</span><span style="color: #000000; ">linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">zoom</span><span style="color: #000000; ">/</span><span style="color: #000000; ">2</span><span style="color: #000000; ">},<br />    rr: {x: linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">zoom</span><span style="color: #000000; ">/</span><span style="color: #000000; ">2</span><span style="color: #000000; ">, y: </span><span style="color: #000000; ">0</span><span style="color: #000000; ">},<br />    ll: {x: </span><span style="color: #000000; ">-</span><span style="color: #000000; ">linkWidth</span><span style="color: #000000; ">/</span><span style="color: #000000; ">2</span><span style="color: #000000; ">, y: </span><span style="color: #000000; ">0</span><span style="color: #000000; ">},<br />    br: {x: linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">zoom</span><span style="color: #000000; ">*</span><span style="color: #000000; ">0.7</span><span style="color: #000000; ">/</span><span style="color: #000000; ">2</span><span style="color: #000000; ">, y: linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">zoom</span><span style="color: #000000; ">*</span><span style="color: #000000; ">0.7</span><span style="color: #000000; ">/</span><span style="color: #000000; ">2</span><span style="color: #000000; ">},<br />    bl: {x: </span><span style="color: #000000; ">-</span><span style="color: #000000; ">linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">zoom</span><span style="color: #000000; ">*</span><span style="color: #000000; ">0.7</span><span style="color: #000000; ">/</span><span style="color: #000000; ">2</span><span style="color: #000000; ">, y: linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">zoom</span><span style="color: #000000; ">*</span><span style="color: #000000; ">0.7</span><span style="color: #000000; ">/</span><span style="color: #000000; ">2</span><span style="color: #000000; ">},<br />    tr: {x: linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">zoom</span><span style="color: #000000; ">*</span><span style="color: #000000; ">0.7</span><span style="color: #000000; ">/</span><span style="color: #000000; ">2</span><span style="color: #000000; ">, y: </span><span style="color: #000000; ">-</span><span style="color: #000000; ">linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">zoom</span><span style="color: #000000; ">*</span><span style="color: #000000; ">0.7</span><span style="color: #000000; ">/</span><span style="color: #000000; ">2</span><span style="color: #000000; ">},<br />    tl: {x: </span><span style="color: #000000; ">-</span><span style="color: #000000; ">linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">zoom</span><span style="color: #000000; ">*</span><span style="color: #000000; ">0.7</span><span style="color: #000000; ">/</span><span style="color: #000000; ">2</span><span style="color: #000000; ">, y: </span><span style="color: #000000; ">-</span><span style="color: #000000; ">linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">zoom</span><span style="color: #000000; ">*</span><span style="color: #000000; ">0.7</span><span style="color: #000000; ">/</span><span style="color: #000000; ">2</span><span style="color: #000000; ">},<br />    BB: {x: </span><span style="color: #000000; ">0</span><span style="color: #000000; ">, y: linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">zoom},<br />    TT: {x: </span><span style="color: #000000; ">0</span><span style="color: #000000; ">, y: </span><span style="color: #000000; ">-</span><span style="color: #000000; ">linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">zoom},<br />    RR: {x: linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">zoom, y: </span><span style="color: #000000; ">0</span><span style="color: #000000; ">},<br />    LL: {x: </span><span style="color: #000000; ">-</span><span style="color: #000000; ">linkWidth, y: </span><span style="color: #000000; ">0</span><span style="color: #000000; ">},<br />    BR: {x: linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">zoom</span><span style="color: #000000; ">*</span><span style="color: #000000; ">0.7</span><span style="color: #000000; ">, y: linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">zoom</span><span style="color: #000000; ">*</span><span style="color: #000000; ">0.7</span><span style="color: #000000; ">},<br />    BL: {x: </span><span style="color: #000000; ">-</span><span style="color: #000000; ">linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">zoom</span><span style="color: #000000; ">*</span><span style="color: #000000; ">0.7</span><span style="color: #000000; ">, y: linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">zoom</span><span style="color: #000000; ">*</span><span style="color: #000000; ">0.7</span><span style="color: #000000; ">},<br />    TR: {x: linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">zoom</span><span style="color: #000000; ">*</span><span style="color: #000000; ">0.7</span><span style="color: #000000; ">, y: </span><span style="color: #000000; ">-</span><span style="color: #000000; ">linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">zoom</span><span style="color: #000000; ">*</span><span style="color: #000000; ">0.7</span><span style="color: #000000; ">},<br />    TL: {x: </span><span style="color: #000000; ">-</span><span style="color: #000000; ">linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">zoom</span><span style="color: #000000; ">*</span><span style="color: #000000; ">0.7</span><span style="color: #000000; ">, y: </span><span style="color: #000000; ">-</span><span style="color: #000000; ">linkWidth</span><span style="color: #000000; ">*</span><span style="color: #000000; ">zoom</span><span style="color: #000000; ">*</span><span style="color: #000000; ">0.7</span><span style="color: #000000; ">}<br />};</span></div><br /><div><span p"="">介绍到这里就l束了,虽然是个例子,但美观性和实用性都q过得去Q小弟花了心思去做,其实E加攚w就可以做出高铁图、公交图、运行图{应用。设想一下,如果能用在轨道交通列控中心大屏监控里Q是多么炫酷。说到这Q又惌v了前D|间云栖大?x)上刚看到的杭州城市数据大脑Q不知何Ӟ哥也能参与一把那L(fng)目呢?可视化,哥的强项……<span lf"=""> <span lf"=""><span p"="">最后,惌看程序,或者想?#8220;地铁拖拖?#8221;的各位,都可以给我留a和发邮gQ?span link"=""><span md="" md-bracket-start"=""><span md="" md-underlined-text"="">tw-service@servasoft.com<span md="" md-bracket-end"=""><span md="" md-href"=""><span md="" md-paren-end"="">?/span></span></span></span></span></span></span></span></span></span></div><img src ="http://www.tkk7.com/TWaver/aggbug/432072.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.tkk7.com/TWaver/" target="_blank">TWaver</a> 2016-12-13 14:36 <a href="http://www.tkk7.com/TWaver/archive/2016/12/13/432072.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>10个TWaver|页3D可视化精彩案?/title><link>http://www.tkk7.com/TWaver/archive/2016/12/09/432065.html</link><dc:creator>TWaver</dc:creator><author>TWaver</author><pubDate>Fri, 09 Dec 2016 07:29:00 GMT</pubDate><guid>http://www.tkk7.com/TWaver/archive/2016/12/09/432065.html</guid><wfw:comment>http://www.tkk7.com/TWaver/comments/432065.html</wfw:comment><comments>http://www.tkk7.com/TWaver/archive/2016/12/09/432065.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.tkk7.com/TWaver/comments/commentRss/432065.html</wfw:commentRss><trackback:ping>http://www.tkk7.com/TWaver/services/trackbacks/432065.html</trackback:ping><description><![CDATA[<div><p>以下|页3D案例均ؓ(f)TWaver原创出品Q推荐用Chrome, FireFox, Safari{对WebGL支持良好的浏览器q行。案例排名不分先后,如需DemoQ可直接甌试用?/p><p><br />1、化学元素周期表</p><p><br />六种排列方式Q炫酷动L果,TWaver 3DL实现?br /><br /></p><div><img title="在这里输入图片标? alt="输入囄说明" src="https://static.oschina.net/uploads/img/201612/13111509_UQ7u.gif" /></div><p><br />演示地址Q?a >http://demo.servasoft.com/chemical-table/</a></p><p><br />2、DNA螺旋?br /><br /></p><div><img title="在这里输入图片标? alt="输入囄说明" src="https://static.oschina.net/uploads/img/201612/09150039_6rlU.png" /></div><p><br />DNA3D模型Q包含几千个球体Q几十万个面Q,高性能渲染Q搭配丰富色彩和光照效果Q可用于ȝ三维可视化?/p><p><br />演示地址Q?a >http://demo.servasoft.com/dna/</a> </p><p><br />3?D手表</p><p><br />l腻的皮革质感,镜面反射效果Q指针动画,真实旉昄?br /><br /></p><div><img title="在这里输入图片标? alt="输入囄说明" src="https://static.oschina.net/uploads/img/201612/09150110_LiYj.png" /></div><p><br />演示地址Q?a >http://demo.servasoft.com/watch/</a></p><p><br />4?D拓扑图之花团锦簇</p><p><br />艳丽多姿?D球花,不百行代码卛_实现?br /><br /></p><div><img title="在这里输入图片标? alt="输入囄说明" src="https://static.oschina.net/uploads/img/201612/09150144_Drwm.jpg" /></div><p><br />演示地址Q?a >http://demo.servasoft.com/tuopu/</a></p><p><br />5?D拓扑图之人在江湖</p><p><br />使用立体拓扑图来展示错综复杂的关pȝQ事半功倍!<br /><br /> </p><div><img title="在这里输入图片标? alt="输入囄说明" src="https://static.oschina.net/uploads/img/201612/09150211_PkRn.png" /></div><p><br />演示地址Q?a >http://demo.servasoft.com/person/</a> </p><p><br />6、地球卫星运行模?/p><p><br />星球大战Q一触即发!<br /><br /></p><p><img alt="" src="http://www.tkk7.com/images/blogjava_net/twaver/卫星.gif" border="0" /></p><p><br />演示地址Q?a >http://demo.servasoft.com/earth/</a> </p><p><br />7、CNC机床监控</p><p><br />工厂三维可视化,助力工业4.0+刉时代?br /><br /></p><p><img title="" alt="q里写图片描q? src="http://img.blog.csdn.net/20161209112141021?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdHdhdmVy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" /></p><p><br />演示地址Q?a >http://demo.servasoft.com/cnc/</a></p><p><br />8、加气站三维可视?/p><p><br />加气站分布站点广Q安全要求高Q通过三维可视化监控,提升安全水^和紧急事件的处理能力?br /><br /></p><p><img title="" alt="q里写图片描q? src="http://img.blog.csdn.net/20161209112235694?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdHdhdmVy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" /></p><p><br />演示地址Q?a >http://demo.servasoft.com/pipe/</a></p><p><br />9、库房三l可视化<br /><br /></p><p>可对接仓库资产管理系l,让仓库管理更加智能化?br /><br /></p><p><img alt="" src="http://www.tkk7.com/images/blogjava_net/twaver/warehouse.gif" border="0" /></p><p><br />演示地址Q?a >http://demo.servasoft.com/demoWarehouese/</a></p><p><br />10?D机?br /><br /></p><p>汇聚资、动环、告警、安防管理和监控一体的3D机房程序,l典的,是最好的?br /><br /></p><p><img title="" alt="q里写图片描q? src="http://img.blog.csdn.net/20161209112418700?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdHdhdmVy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" /></p><p><br />演示地址Q?a >http://demo.servasoft.com/room/</a></p></div><strong></strong><img src ="http://www.tkk7.com/TWaver/aggbug/432065.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.tkk7.com/TWaver/" target="_blank">TWaver</a> 2016-12-09 15:29 <a href="http://www.tkk7.com/TWaver/archive/2016/12/09/432065.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>HTML5数据可视化第三弹Q萌萌哒拓扑囑ֈl?/title><link>http://www.tkk7.com/TWaver/archive/2016/12/02/432037.html</link><dc:creator>TWaver</dc:creator><author>TWaver</author><pubDate>Fri, 02 Dec 2016 02:26:00 GMT</pubDate><guid>http://www.tkk7.com/TWaver/archive/2016/12/02/432037.html</guid><wfw:comment>http://www.tkk7.com/TWaver/comments/432037.html</wfw:comment><comments>http://www.tkk7.com/TWaver/archive/2016/12/02/432037.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.tkk7.com/TWaver/comments/commentRss/432037.html</wfw:commentRss><trackback:ping>http://www.tkk7.com/TWaver/services/trackbacks/432037.html</trackback:ping><description><![CDATA[<div><p><strong>前言</strong> </p><p>最q忙着l客h腾一个复杂的多层嵌套关系。客户一句话“要好看!”Q哥忙白了头啊Q还好最l搞定了?/p><p> </p><p><strong>需求描q?/strong> </p><p>先简单描qCq次客户的需求?/p><p>现实应用中,|络拓扑囄构可能很单,也可能非常复杂?/p><p>比如q种节点较多的单层拓扑:(x)<br /><br /></p><p><br /><img style="display: inline; cursor: pointer;" alt="" src="https://segmentfault.com/img/bVmpWB" /></p><p>E复杂一些的Q?br /><br /></p><p><br /><img style="display: inline; cursor: pointer;" alt="" src="https://segmentfault.com/img/bVmpWD" /></p><p> </p><p>再复杂一些的Q?/p><p><br /><img style="display: inline; cursor: pointer;" alt="" src="https://segmentfault.com/img/bVmpWE" /></p><p> </p><p>在这些拓扑图中常见的场景是,很多|络节点需要组成一l,q常被称?#8220;|元l?#8221;。一般来_(d)|元l会(x)有一个ŞӞ双击可以展开/闭合。如下图Q?/p><p><br /><img style="display: inline; cursor: pointer;" alt="" src="https://segmentfault.com/img/bVmpWT" /></p><p><img style="display: inline; cursor: pointer;" alt="" src="https://segmentfault.com/img/bVmpWU" /></p><p> </p><p>q次客户的需求中Q最大的隄是需要有五层|元l的嵌套Q五层同时展开Ӟ要求清晰观。常规的分组形状有圆形、矩形、^行四边Ş{,无论哪种形状Q分l多了后Q就?x)生审疲功뀂比如,我让设计师mm单地把五层嵌套画个图Q它看v来会(x)是这P(x)</p><p><br /><img width="700" height="414" title="点击查看原始大小囄" style="display: inline; cursor: pointer;" alt="" src="https://segmentfault.com/img/bVmpXl" /></p><p> </p><p>我把q个囄客户看了以后Q客戯C希?#8220;l构能够更加清晰”。那天,都大雨倄Q我抓x腮一个下午,l于有了一些灵感?/p><p> </p><p><strong>颜色</strong> </p><p>怎样才能使得l构效果更加清晰Q我惛_的是用颜艌Ӏ颜色永q是囑Ş设计里面的第一要素。如果分l颜色千一律,自然q不太清楚包含关系。但是颜色太多五颜六Ԍ昄也不W合?sh)信UIpȝ的风根{那颜色要如何设|呢Q层层嵌套的分组Q层?#8230;…叮!你有没有惛_一U蔬菜?</p><p> </p><p><img style="display: inline; cursor: pointer;" alt="" src="https://segmentfault.com/img/bVmpXx" /></p><p>  </p><p>Q此处哼?#8220;如果你可以一层一层一层地剥开我的?#8230;…”一N……Q?/p><p>q颗大洋q上去层次分明Q是因ؓ(f)它的颜色从内到外有一定规律的变化Q渐变。说到渐变,又想hqGF推荐的一枚游戏,大概内容是按照颜色的渐变规律来排列一些方块。(很无聊有没有Q)</p><p> </p><p><img style="display: inline; cursor: pointer;" alt="" src="https://segmentfault.com/img/bVmpXE" /></p><p> </p><p>不过Q前端设计中Q配色倒是很重要的一个环节?/p><p>MQ想好了用渐变的配色来嵌套l更清晰后,大胆地试一下:(x)</p></div><strong></strong><br /><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #000000; ">var group </span><span style="color: #000000; ">=</span><span style="color: #000000; "> </span><span style="color: #0000FF; ">new</span><span style="color: #000000; "> twaver.Group();<br />group.setStyle(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">group.fill.color</span><span style="color: #000000; ">'</span><span style="color: #000000; ">, style[</span><span style="color: #000000; ">3</span><span style="color: #000000; ">]);<br />group.setStyle(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">group.deep</span><span style="color: #000000; ">'</span><span style="color: #000000; ">, </span><span style="color: #000000; ">0</span><span style="color: #000000; ">);<br />group.setStyle(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">group.outline.width</span><span style="color: #000000; ">'</span><span style="color: #000000; ">, style[</span><span style="color: #000000; ">1</span><span style="color: #000000; ">]);<br />group.setStyle(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">group.outline.color</span><span style="color: #000000; ">'</span><span style="color: #000000; ">, style[</span><span style="color: #000000; ">0</span><span style="color: #000000; ">]);<br />group.setStyle(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">group.shape</span><span style="color: #000000; ">'</span><span style="color: #000000; ">, </span><span style="color: #000000; ">'</span><span style="color: #000000; ">roundrect</span><span style="color: #000000; ">'</span><span style="color: #000000; ">);         <br />group.setStyle(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">select.style</span><span style="color: #000000; ">'</span><span style="color: #000000; ">, </span><span style="color: #000000; ">'</span><span style="color: #000000; ">none</span><span style="color: #000000; ">'</span><span style="color: #000000; ">);<br />group.setStyle(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">vector.outline.pattern</span><span style="color: #000000; ">'</span><span style="color: #000000; ">, style[</span><span style="color: #000000; ">2</span><span style="color: #000000; ">]);<br />group.setStyle(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">label.font</span><span style="color: #000000; ">'</span><span style="color: #000000; ">, </span><span style="color: #000000; ">'</span><span style="color: #000000; ">14px "Microsoft Yahei"</span><span style="color: #000000; ">'</span><span style="color: #000000; ">);<br />group.setStyle(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">whole.alpha</span><span style="color: #000000; ">'</span><span style="color: #000000; ">, </span><span style="color: #000000; ">0.8</span><span style="color: #000000; ">);<br />group.setStyle(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">group.padding</span><span style="color: #000000; ">'</span><span style="color: #000000; ">, </span><span style="color: #000000; ">-</span><span style="color: #000000; ">10</span><span style="color: #000000; ">);<br />group.setStyle(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">label.position</span><span style="color: #000000; ">'</span><span style="color: #000000; ">, </span><span style="color: #000000; ">'</span><span style="color: #000000; ">topright.topleft</span><span style="color: #000000; ">'</span><span style="color: #000000; ">);<br />group.setName(name);<br />group.setLocation(</span><span style="color: #000000; ">100</span><span style="color: #000000; ">+</span><span style="color: #000000; ">150</span><span style="color: #000000; ">*</span><span style="color: #000000; ">level, </span><span style="color: #000000; ">300</span><span style="color: #000000; ">);<br /><br />box.add(group);  </span></div><br /><div><p>数据量更大的时候,看看分组是不是会(x)更加清晰Q?/p><p><br /><img width="700" height="532" title="点击查看原始大小囄" style="display: inline; cursor: pointer;" alt="" src="https://segmentfault.com/img/bVmpXT" /></p><h2> </h2><p><strong>更多颜色</strong></p><p>q个囑ց出来之后Q拿l周围几个同事看Q大家纷UCZ错,但是g有一些死板,不够生动。生动。。那是要活灉|现的Q于是我l箋抓x腮,又想C一些瓜果蔬菜:(x)</p><p> </p><p><img style="display: inline; cursor: pointer;" alt="" src="https://segmentfault.com/img/bVmpX2" /></p><p><img style="display: inline; cursor: pointer;" alt="" src="https://segmentfault.com/img/bVmpX7" /></p><p> </p><p>果然q是配色不够明艳啊。我又让设计师mml找了几个色D整了一下:(x)</p><p><br /><img width="700" height="396" title="点击查看原始大小囄" style="display: inline; cursor: pointer;" alt="" src="https://segmentfault.com/img/bVmpYd" /><br /><br /></p><p><strong>折角</strong></p><p>有了写花瓣层叠的感觉Q是不是舒服多了Q不q,Ҏ(gu)正正的组的ŞӞq是太死板,~Z立体感。看到桌子上的一张折了角的白U,H然有了灉|?/p><p>l方形的l做一个折角效果,不知效果如何。要做这个效果,p重写group的绘Ӟ自己接管2dl制了。Group的Ş状将不再是一个矩形,而是一个切角的矩Ş?/p><p> </p></div><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #008000; ">//</span><span style="color: #008000; ">draw round rect body.</span><span style="color: #008000; "><br /></span><span style="color: #000000; ">var roundRadius</span><span style="color: #000000; ">=</span><span style="color: #000000; ">10</span><span style="color: #000000; ">;<br />ctx.save();<br />ctx.beginPath();<br />ctx.moveTo(rect.x</span><span style="color: #000000; ">+</span><span style="color: #000000; ">roundRadius, rect.y);<br />ctx.lineTo(rect.x</span><span style="color: #000000; ">+</span><span style="color: #000000; ">rect.width</span><span style="color: #000000; ">-</span><span style="color: #000000; ">60</span><span style="color: #000000; ">, rect.y);<br />ctx.lineTo(rect.x</span><span style="color: #000000; ">+</span><span style="color: #000000; ">rect.width, rect.y</span><span style="color: #000000; ">+</span><span style="color: #000000; ">28</span><span style="color: #000000; ">);<br />ctx.lineTo(rect.x</span><span style="color: #000000; ">+</span><span style="color: #000000; ">rect.width, rect.y</span><span style="color: #000000; ">+</span><span style="color: #000000; ">rect.height</span><span style="color: #000000; ">-</span><span style="color: #000000; ">roundRadius);<br />ctx.quadraticCurveTo(rect.x</span><span style="color: #000000; ">+</span><span style="color: #000000; ">rect.width, rect.y</span><span style="color: #000000; ">+</span><span style="color: #000000; ">rect.height, rect.x</span><span style="color: #000000; ">+</span><span style="color: #000000; ">rect.width</span><span style="color: #000000; ">-</span><span style="color: #000000; ">roundRadius, rect.y</span><span style="color: #000000; ">+</span><span style="color: #000000; ">rect.height);<br />ctx.lineTo(rect.x</span><span style="color: #000000; ">+</span><span style="color: #000000; ">roundRadius, rect.y</span><span style="color: #000000; ">+</span><span style="color: #000000; ">rect.height);<br />ctx.quadraticCurveTo(rect.x, rect.y</span><span style="color: #000000; ">+</span><span style="color: #000000; ">rect.height, rect.x, rect.y</span><span style="color: #000000; ">+</span><span style="color: #000000; ">rect.height</span><span style="color: #000000; ">-</span><span style="color: #000000; ">roundRadius);<br />ctx.lineTo(rect.x, rect.y</span><span style="color: #000000; ">+</span><span style="color: #000000; ">roundRadius);<br />ctx.quadraticCurveTo(rect.x, rect.y, rect.x</span><span style="color: #000000; ">+</span><span style="color: #000000; ">roundRadius, rect.y);<br />ctx.save();<br />ctx.shadowOffsetX </span><span style="color: #000000; ">=</span><span style="color: #000000; "> </span><span style="color: #000000; ">4</span><span style="color: #000000; ">;<br />ctx.shadowOffsetY </span><span style="color: #000000; ">=</span><span style="color: #000000; "> </span><span style="color: #000000; ">4</span><span style="color: #000000; ">;<br />ctx.shadowBlur </span><span style="color: #000000; ">=</span><span style="color: #000000; "> </span><span style="color: #000000; ">4</span><span style="color: #000000; ">;<br />ctx.shadowColor </span><span style="color: #000000; ">=</span><span style="color: #000000; ">"</span><span style="color: #000000; ">#555555</span><span style="color: #000000; ">"</span><span style="color: #000000; ">;<br />ctx.fill();<br />ctx.restore();<br />ctx.lineWidth</span><span style="color: #000000; ">=</span><span style="color: #000000; ">node.getStyle(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">group.outline.width</span><span style="color: #000000; ">'</span><span style="color: #000000; ">);<br />ctx.strokeStyle</span><span style="color: #000000; ">=</span><span style="color: #000000; ">node.getStyle(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">group.outline.color</span><span style="color: #000000; ">'</span><span style="color: #000000; ">);<br />ctx.stroke();       <br />ctx.restore();</span></div><br /><div><p>通过l制一个带圆角的矩形ƈ切掉一个角Qstroke到画布上。看看效果:(x)</p><p> </p><p> </p><p><img width="700" height="368" title="点击查看原始大小囄" alt="q里写图片描q? src="http://img.blog.csdn.net/20150716191536606" /></p><p> </p><p>再通过增加圆角、切角、增加阴影、设|不同的Ҏ(gu)U宽Q让分组q一步?#8220;层层递进”的感觉。现在就剩下L角的l节了?/p><p>折角q里Q需要画一个被折下来的直角三角形。三角Ş的颜Ԍ应该?#8220;U?#8221;的背面颜艌Ӏ这里小心定义三角Ş的ŞӞq进行填充:(x)</p></div><br /><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #008000; ">//</span><span style="color: #008000; ">draw corlor.</span><span style="color: #008000; "><br /></span><span style="color: #000000; ">ctx.fillStyle</span><span style="color: #000000; ">=</span><span style="color: #000000; ">node.getStyle(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">group.outline.color</span><span style="color: #000000; ">'</span><span style="color: #000000; ">);             <br />ctx.lineWidth</span><span style="color: #000000; ">=</span><span style="color: #000000; ">node.getStyle(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">group.outline.width</span><span style="color: #000000; ">'</span><span style="color: #000000; ">);<br />ctx.lineJoin</span><span style="color: #000000; ">=</span><span style="color: #000000; ">'</span><span style="color: #000000; ">bevel</span><span style="color: #000000; ">'</span><span style="color: #000000; ">;<br />ctx.beginPath();<br />ctx.moveTo(rect.x</span><span style="color: #000000; ">+</span><span style="color: #000000; ">rect.width</span><span style="color: #000000; ">-</span><span style="color: #000000; ">60</span><span style="color: #000000; ">, rect.y);<br />ctx.lineTo(rect.x</span><span style="color: #000000; ">+</span><span style="color: #000000; ">rect.width</span><span style="color: #000000; ">-</span><span style="color: #000000; ">23</span><span style="color: #000000; ">-</span><span style="color: #000000; ">10</span><span style="color: #000000; ">, rect.y</span><span style="color: #000000; ">+</span><span style="color: #000000; ">47</span><span style="color: #000000; ">-</span><span style="color: #000000; ">10</span><span style="color: #000000; ">);<br />ctx.quadraticCurveTo(rect.x</span><span style="color: #000000; ">+</span><span style="color: #000000; ">rect.width</span><span style="color: #000000; ">-</span><span style="color: #000000; ">23</span><span style="color: #000000; ">, rect.y</span><span style="color: #000000; ">+</span><span style="color: #000000; ">46</span><span style="color: #000000; ">, rect.x</span><span style="color: #000000; ">+</span><span style="color: #000000; ">rect.width</span><span style="color: #000000; ">-</span><span style="color: #000000; ">23</span><span style="color: #000000; ">+</span><span style="color: #000000; ">10</span><span style="color: #000000; ">, rect.y</span><span style="color: #000000; ">+</span><span style="color: #000000; ">47</span><span style="color: #000000; ">-</span><span style="color: #000000; ">10</span><span style="color: #000000; ">);<br />ctx.lineTo(rect.x</span><span style="color: #000000; ">+</span><span style="color: #000000; ">rect.width, rect.y</span><span style="color: #000000; ">+</span><span style="color: #000000; ">28</span><span style="color: #000000; ">);<br />ctx.closePath();<br />ctx.save();<br />ctx.shadowOffsetX </span><span style="color: #000000; ">=</span><span style="color: #000000; "> </span><span style="color: #000000; ">4</span><span style="color: #000000; ">;<br />ctx.shadowOffsetY </span><span style="color: #000000; ">=</span><span style="color: #000000; "> </span><span style="color: #000000; ">4</span><span style="color: #000000; ">;<br />ctx.shadowBlur </span><span style="color: #000000; ">=</span><span style="color: #000000; "> </span><span style="color: #000000; ">4</span><span style="color: #000000; ">;<br />ctx.shadowColor </span><span style="color: #000000; ">=</span><span style="color: #000000; ">"</span><span style="color: #000000; ">#777777</span><span style="color: #000000; ">"</span><span style="color: #000000; ">;<br />ctx.fill();                         <br />ctx.restore();<br />ctx.strokeStyle</span><span style="color: #000000; ">=</span><span style="color: #000000; ">node.getStyle(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">group.outline.color</span><span style="color: #000000; ">'</span><span style="color: #000000; ">);<br />ctx.stroke(); </span></div><br /><div><p>效果如下Q立体感出来以后Q是不是生动了很多?</p><p> </p><p><img width="700" height="367" title="点击查看原始大小囄" alt="q里写图片描q? src="http://img.blog.csdn.net/20150716191613181" /></p><p> </p><p>q里要注意的是,折角的阴׃要设|,q且填充要用和Ҏ(gu)相同的颜Ԍ增加“折纸”的立体感?/p><h2> </h2><p><strong>细?/strong></p><p>折纸效果有了Q不q左侧上方略昄P于是利用canvas?d来练l手Q画个path看看Q?/p></div><br /><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #000000; ">ctx.save();<br />ctx.strokeStyle</span><span style="color: #000000; ">=</span><span style="color: #000000; ">'</span><span style="color: #000000; ">#27A3DA</span><span style="color: #000000; ">'</span><span style="color: #000000; ">;<br />ctx.lineWidth</span><span style="color: #000000; ">=</span><span style="color: #000000; ">2</span><span style="color: #000000; ">;<br />ctx.beginPath();<br />ctx.moveTo(rect.x</span><span style="color: #000000; ">+</span><span style="color: #000000; ">31</span><span style="color: #000000; ">, rect.y</span><span style="color: #000000; ">+</span><span style="color: #000000; ">5</span><span style="color: #000000; ">);<br />ctx.lineTo(rect.x</span><span style="color: #000000; ">+</span><span style="color: #000000; ">25</span><span style="color: #000000; ">, rect.y</span><span style="color: #000000; ">+</span><span style="color: #000000; ">20</span><span style="color: #000000; ">);<br />ctx.bezierCurveTo(rect.x</span><span style="color: #000000; ">+</span><span style="color: #000000; ">25</span><span style="color: #000000; ">, rect.y</span><span style="color: #000000; ">+</span><span style="color: #000000; ">26</span><span style="color: #000000; ">, rect.x</span><span style="color: #000000; ">+</span><span style="color: #000000; ">28</span><span style="color: #000000; ">, rect.y</span><span style="color: #000000; ">+</span><span style="color: #000000; ">28</span><span style="color: #000000; ">, rect.x</span><span style="color: #000000; ">+</span><span style="color: #000000; ">32</span><span style="color: #000000; ">, rect.y</span><span style="color: #000000; ">+</span><span style="color: #000000; ">23</span><span style="color: #000000; ">);<br />ctx.lineTo(rect.x</span><span style="color: #000000; ">+</span><span style="color: #000000; ">42</span><span style="color: #000000; ">, rect.y</span><span style="color: #000000; ">-</span><span style="color: #000000; ">2</span><span style="color: #000000; ">);<br />ctx.bezierCurveTo(rect.x</span><span style="color: #000000; ">+</span><span style="color: #000000; ">42</span><span style="color: #000000; ">, rect.y</span><span style="color: #000000; ">-</span><span style="color: #000000; ">12</span><span style="color: #000000; ">, rect.x</span><span style="color: #000000; ">+</span><span style="color: #000000; ">32</span><span style="color: #000000; ">, rect.y</span><span style="color: #000000; ">-</span><span style="color: #000000; ">10</span><span style="color: #000000; ">, rect.x</span><span style="color: #000000; ">+</span><span style="color: #000000; ">32</span><span style="color: #000000; ">, rect.y</span><span style="color: #000000; ">-</span><span style="color: #000000; ">5</span><span style="color: #000000; ">);<br />ctx.lineTo(rect.x</span><span style="color: #000000; ">+</span><span style="color: #000000; ">29</span><span style="color: #000000; ">, rect.y</span><span style="color: #000000; ">-</span><span style="color: #000000; ">1</span><span style="color: #000000; ">);<br /><br />ctx.shadowOffsetX </span><span style="color: #000000; ">=</span><span style="color: #000000; "> </span><span style="color: #000000; ">1</span><span style="color: #000000; ">;<br />ctx.shadowOffsetY </span><span style="color: #000000; ">=</span><span style="color: #000000; "> </span><span style="color: #000000; ">1</span><span style="color: #000000; ">;<br />ctx.shadowBlur </span><span style="color: #000000; ">=</span><span style="color: #000000; "> </span><span style="color: #000000; ">1</span><span style="color: #000000; ">;<br />ctx.shadowColor </span><span style="color: #000000; ">=</span><span style="color: #000000; ">"</span><span style="color: #000000; ">#aaaaaa</span><span style="color: #000000; ">"</span><span style="color: #000000; ">;<br />ctx.stroke();<br />ctx.restore();</span></div><br /><div><p>q行一下,你猜是神马?</p><p> </p><p><img width="700" height="329" title="点击查看原始大小囄" alt="q里写图片描q? src="http://img.blog.csdn.net/20150716191639438" /></p><p> </p><p>哈哈Q一个小回Ş针瞬间跃然纸上了Q感觉萌萌哒Qؓ(f)了增加立体感Q回形针也是要设|阴qQ不q偏UM要太大、颜色要淡一些,像这P(x)</p><p><img title="" alt="q里写图片描q? src="http://img.blog.csdn.net/20150716191701957" /></p><p> </p><p> </p><p>适当明艳的色彩,加上折角、阴影和回形针Q这回这个层层嵌套ȝ是清晰又好看了吧Q?/p><p>q行一下,拖拖拽拽Q因Z前已l做了不图标、线条的样式Q所以M效果q是很不错的Q?/p><p> </p><p><img width="699" height="437" title="点击查看原始大小囄" alt="q里写图片描q? src="http://img.blog.csdn.net/20150716191729150" /></p><p><img width="700" height="366" title="点击查看原始大小囄" alt="q里写图片描q? src="http://img.blog.csdn.net/20150716192033162" /></p><h2><br /></h2><p><strong>后记</strong> </p><p>之前也说QHTML5的canvasQ虽然已l不是什么新鲜技术了Q但当技术本w不再有壁垒Q我们更应该注重的是实际业务中的应用Q比如在画这U组l结构关p非常复杂的拓扑图时Q如何让囑Ş更加清晰、易懂,让技术真正落到实处。如果你有更加好的这cL扑图的解x案,也可以和我联pM:(x)tw-service@servasoft.com</p><p> <br /><br /></p></div><img src ="http://www.tkk7.com/TWaver/aggbug/432037.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.tkk7.com/TWaver/" target="_blank">TWaver</a> 2016-12-02 10:26 <a href="http://www.tkk7.com/TWaver/archive/2016/12/02/432037.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>TWaver3D拓扑图之人在江湖http://www.tkk7.com/TWaver/archive/2016/11/24/432009.htmlTWaverTWaverThu, 24 Nov 2016 02:03:00 GMThttp://www.tkk7.com/TWaver/archive/2016/11/24/432009.htmlhttp://www.tkk7.com/TWaver/comments/432009.htmlhttp://www.tkk7.com/TWaver/archive/2016/11/24/432009.html#Feedback0http://www.tkk7.com/TWaver/comments/commentRss/432009.htmlhttp://www.tkk7.com/TWaver/services/trackbacks/432009.html阅读全文

TWaver 2016-11-24 10:03 发表评论
]]>
TWaver3D拓扑图之球花l放 http://www.tkk7.com/TWaver/archive/2016/11/23/432007.htmlTWaverTWaverWed, 23 Nov 2016 02:32:00 GMThttp://www.tkk7.com/TWaver/archive/2016/11/23/432007.htmlhttp://www.tkk7.com/TWaver/comments/432007.htmlhttp://www.tkk7.com/TWaver/archive/2016/11/23/432007.html#Feedback0http://www.tkk7.com/TWaver/comments/commentRss/432007.htmlhttp://www.tkk7.com/TWaver/services/trackbacks/432007.html阅读全文

TWaver 2016-11-23 10:32 发表评论
]]>
一ƾ最新的Web 3D开发工具—TWaver Make http://www.tkk7.com/TWaver/archive/2016/11/22/432006.htmlTWaverTWaverTue, 22 Nov 2016 02:35:00 GMThttp://www.tkk7.com/TWaver/archive/2016/11/22/432006.htmlhttp://www.tkk7.com/TWaver/comments/432006.htmlhttp://www.tkk7.com/TWaver/archive/2016/11/22/432006.html#Feedback0http://www.tkk7.com/TWaver/comments/commentRss/432006.htmlhttp://www.tkk7.com/TWaver/services/trackbacks/432006.html

在我们协助客戯?D应用的开发过E中Q客户遇到的最头疼的问题是如何在短旉内学?x)用TWaver 3D引擎Q以?qing)用TWaver 3D来创建和导入目所需的各U?D业务模型。由于项目涵盖的行业J多、对模型U类和精度的需求各异,Z降低TWaver底层引擎的用难度,TWaver发布了一Ƒօ新的模型库框架TWaver® MakeQ来帮助开发者快速创建高质量、专业的行业可视化应用场景?/p>

 

单来_(d)TWaver® Make提供的是模版定义的开发SDK框架Q和高质量的跨行业模型库。用TWaver® MakeQ可以把TWaver 2D/3D的代码细节包装在模版中进行复用,极大的降低用TWaver的复杂度Q提高开发效率?/p>

 

模型定义

 

TWaver® MakeZJavascript对各c资源进行模版化定义Q它的核心只?个函敎ͼ(x)

make.Default.registerq行模版定义Q?/p>

make.Default.loadq行模型加蝲?/p>

 

通过数据的模版化Q可以实现各c资源的标准化、快速共享与复用?/p>

 

TWaver® Make 可以快速定义:(x)

 

- TWaver HTML5 2D拓扑?nbsp;

- TWaver Mono 3D模型 

- HTML片段、eChart{第三方uilg 

- 字符丌Ӏ数据、图片、文件等资源 

 

模型加蝲

 

TWaver® Make模型库提供了大量高精度、专业的行业预制2D?D模型库,可以直接使用。模型库像一本字怸P开发着只需查阅模型idQ就可以通过loadҎ(gu)快速加载用这些内|模型?/p>

 

例如Q下面代码调用了Make中预定义的电(sh)力变늫中的变压器模型。已知变压器模型的id为twaver.grid.transformerQ则Q?br />

var transformer = make.Default.load('twaver.grid.transformer');  
network3d.getDataBox().addByDescendant(transformer);  


 

q样一来,很快可以搭建出一个变늫的场景了Q?br />

 

预置模型

 

TWaver® Make提供了大量行业预制模型库Q可供开发者直接用。包括各c?D拓扑囑֏(qing)样式?D模型、工业监控组Ӟ늛?sh)信、电(sh)力、数据中心、工业自动化{领域。从机房、机柜、服务器、灭火器Q到人物、花草、徏{、道路,行业模板库包|万象,供?zhn)所用。当?dng)?zhn)也可以LҎ(gu)板库q行扩展?/p>

 

TWaver® Make 模型库涵盖领域:(x)

 

- ?sh)?/p>

- ?sh)?/p>

- 数据中心

- 仓储物流

 

模型扩展

如果TWaver® Make的专业模型库q不能满x的业务需求,Ƣ迎联系我们Q我们将为?zhn)提供专业的模型扩展定制服务?/p>

 

最后,我们用一张图来简单说明TWaver® Make在整个TWaver产品体系中的位置Q?/p>

 

 

可以看到QTWaver® Make位于TWaver 3D引擎上层Q包含了开发框架和模板库,如果把搭建系l比L盖大|那么TWaver 2D?D像沙土和水泥,而TWaver® Make的就像是各种标准?#8220;砖头”Q盖房子的过E,也就变成?#8220;搭积?#8221;的过E。盖大楼Q也不再需要从挖土烧砖开始,可以让设计师更多的_֊专注在徏{结构和功能设计上?/p>

 

如果(zhn)对Make感兴,或者有3D应用开发的需求,不妨下蝲TWaver® Make试试。有M问题Q也可以留言Q或者发邮gl我们:(x)tw-service@servasoft.com?/p>




TWaver 2016-11-22 10:35 发表评论
]]>
两步创徏3D数据中心 http://www.tkk7.com/TWaver/archive/2016/11/21/432001.htmlTWaverTWaverMon, 21 Nov 2016 03:25:00 GMThttp://www.tkk7.com/TWaver/archive/2016/11/21/432001.htmlhttp://www.tkk7.com/TWaver/comments/432001.htmlhttp://www.tkk7.com/TWaver/archive/2016/11/21/432001.html#Feedback0http://www.tkk7.com/TWaver/comments/commentRss/432001.htmlhttp://www.tkk7.com/TWaver/services/trackbacks/432001.html  阅读全文

TWaver 2016-11-21 11:25 发表评论
]]>
HTML5数据可视化第二弹Q打造最?D机房http://www.tkk7.com/TWaver/archive/2016/11/18/431997.htmlTWaverTWaverFri, 18 Nov 2016 02:29:00 GMThttp://www.tkk7.com/TWaver/archive/2016/11/18/431997.htmlhttp://www.tkk7.com/TWaver/comments/431997.htmlhttp://www.tkk7.com/TWaver/archive/2016/11/18/431997.html#Feedback0http://www.tkk7.com/TWaver/comments/commentRss/431997.htmlhttp://www.tkk7.com/TWaver/services/trackbacks/431997.html


自TWaver 3D产品发布以来QTWaver 3D的定位一直在于ؓ(f)企业提供3D应用的快速开发工P方便企业开发适合自己的高效、实时的监控pȝ?br />
Zq样的品定位,我们在过ȝ一q多旉里,一直将重心攑֜提升引擎效率Q增加可视化工具上。对于我们的优势应用行业——?sh)信行业Q我们在3D机房应用上做了比较多的优化和定制。近期,有不客户向我们提出Q总觉用TWaver 3D开发出来的界面Q不像主的3D效果那么_。首先,我们惌Q效果图l归是效果图Q和实际的系l一般来说还是有一些差异。其ơ,3D Maxq些专业3D建模工具Q和TWaverq不是对立的Q而是相辅相成的工兗我们已l支持将3D max的文件导入TWaverq行展示Q也正在研究使得TWaver能对接更多的模型cd。大家可以一赯论,如何让TWaver?D模型做得更好。最后,我们始终怿Q作为开发工L(fng)我们Q是前途无限的Q因此我们决定挑战一下效果图Q看看TWaver?D效果Q到底有多强?br />
首先我们先找来一张效果图Q真的是效果囑֓~~

HTML5 3D机房3

q张效果囑֒TWaver 3D以往的demo风格都大不相同,我们来按图索个机房吧~


地板

W一个要做,也是应该比较单的Q就是地ѝ这个地板应该是一个有点厚度、有格子贴图的薄薄立方体q面。还好经q封装,写一Djson对象p定义了:(x)


{
name: 
'地板',
type: 
'cube',
width: 
1600,
height: 
10,
depth: 
1300,
 
style: {
'm.color''#BEC9BE',
'm.ambient''#BEC9BE',
}
}

通过定义Q创Z一?3c?16c的地板块:(x)
HTML5 3D机房4

调整到合适的角度看,效果q不错,但颜色欠~Z些,需要找一个材质纹理图。纹理图的尺寔R需要是宽和高都?的幂Q例?28×128?56*256{,q样出来效果才会(x)好。这也是3D软g一般所要求的。另外纹理要能连l拼接不露破l,q样才好。例如下面我google出来的图Q?br />
HTML5 3D机房5


在style里面dQ?/p>


'top.m.texture.image''images/floor.png',
'top.m.texture.repeat'new mono.Vec2(10,10),

效果如下Q?br />HTML5 3D机房6

虽然不是很华丽,但作为机房的地板Q也lԒ有余了。好像有点so easyQ决定加大难度,l地板加一个方便运送设备的斜坡Q?br />
HTML5 3D机房7

q里q大家普及(qing)下TWaver的好处了。Twaver里面的对象可以支持运,q个斜坡Q可以定义一个斜的立方体Q让地板剪掉立方体,应该可以做到。于是l定义jsonQ?/p>


{
    name: 
'地板切坡',
    type: 
'cube',
    width: 
200,
    height: 
20,
    depth: 
260,
    translate: [
-348,0,530],
    rotate: [Math.PI
/180*300],
    op: 
'-',
    style: {
      …,
    }
  }

q里定义的一个倾斜的立方体Q通过translate定义位置Q通过rotate定义旋{角度Q然后再通过op定义q算W,q里?#8220;减去”Q就?#8220;-”。被剪掉的立方体也可以设|材质、纹理、脓(chung)图、颜?#8230;.{等。看看效果:(x)
HTML5 3D机房8

走廊?br />
效果囄戉K有点狭窄(jing)Q决定加一条宽敞的走廊Qƈ在走廊上放一个接待桌。对于桌子这U没有业务属性的对象Qؓ(f)了简单就h做一个立方体表示吧!q个单,l箋使用上述办法Q?/p>


{
    name: 
'走廊板凳',
    type: 
'cube',
    width: 
300,
    height: 
50,
    depth: 
100,
    translate: [
3500-500],
  }

HTML5 3D机房9

有点单,再加炚w影效果:(x)
HTML5 3D机房10

单单一个接待桌做好啦Q下面l造房子,盖墙体?/p>


墙体


墙体是一个不规则的\径,不过攑ֿQTWaver的引擎不光支持不规则路径Q连曲线路径都可以噢。所以看上去挺麻?ch)实际还是比较简单的。在json里面定义一l数字的坐标Q让q些数字依次q接Q组成一个墙体,最后生?D对象攑օ场景中?br /> Json定义大致如下Q?/p>


{
    name: 
'd?/span>',
    type: 
'path',
    width: 
20,
    height: 
200,
    translate: [
-5000-500],
    data:[
      [
00],
      [
10000],
      [
1000500],
      [
500500],
      [
5001000],
      [
01000],
      [
0,0],
    ],
}

注意q里的类型变成了pathQdata中定义了一个二l坐标数l来描述墙体。由于墙都是从底面开始的Q所以只定义它的q面的x、y坐标p了。吸取刚才的l验教训Q启用阴影ƈ咨询设计师美眉几个颜色值加上,看看效果Q?br />HTML5 3D机房12

再瞅瞅细节,好像~点啥,没门Q?br />
HTML5 3D机房13


?br />
门如果直接放上去Q会(x)被墙盖住Q如果比墙厚Q又隄不符合实际。还是应该先定义一个门z立方体Q把门所在的位置挖掉Q?/div>
{
    name: 
'门洞',
    type: 
'cube',
    width: 
195,
    height: 
170,
    depth: 
30,
    op: 
'-',
    translate:[
-350,2,500],
}

刚好挖在斜坡的位|,q样讑֤q屋方便了Q?br />
HTML5 3D机房14


不过q门没有一个门框,感觉不太生动。多一个门框会(x)感觉立体感强一些。门框可以是一个比门洞略大的立方体Q在挖门z之前添加:(x)


{
    name: 
'门框',
    type: 
'cube',
    width: 
205,
    height: 
180,
    depth: 
26,
    translate: [
-3500500],
    op: 
'+',
  }

加上阴媄(jing)和光U等l合效果Q还不错Q挺有档ơ的?br />
HTML5 3D机房15


q少点东西,对,门还没装上去。作为机房,应该来个清爽透亮的玻璃门。门体较大,来个双开门吧。门的定义比较简单,是一个薄的立方体。不qؓ(f)了做到玻璃效果,要设|透明度,让他看上L像一个玻璃,再让设计师美眉弄一张好看一点的门的图,贴上厅R先做左边的门:(x)


{
    name: 
'左门',
    type: 
'cube',
    width: 
93,
    height: 
165,
    depth: 
2,
    translate:[
-397,4,500],
    style:{
      
'm.transparent'true,
      
'm.texture.image''images/door_left.png',          
    }

上面增加的style主要是透明和脓(chung)图两V看看效果:(x)

HTML5 3D机房17


再把双的也加上Q位|对U而已Qjson׃贴了。ؓ(f)了增加体验,门上再设|动画:(x)双击可以自动打开Q再双击可以直接关闭。TWaver的动d能引擎做好了装Q在json中直接指定动ȝ型就行了。不q要注意左右门的动画旋{方向要相反,要不然一个向里开一个向外开感觉比较怪异?br />
HTML5 3D机房18


H?/strong>


有门p有窗。有H才?#8220;H明几净”的清爽干净的赶脚。就在门的旁边开一扇大H户吧!谁不喜欢大窗户呢Q方法和门类|先放H框后挖H体。不qؓ(f)了有点变化,q里不做H框了,做一个窗収ͼҎ(gu)和道理与门相同?/p>


{
 name: ‘ȝh’,
 type: ‘cube’,
 width: 
420,
 height: 
150,
 depth: 
50,
 translate: [
20030500],
 op: ‘
-‘,
 },{
 name: ‘ȝ户台’,
 type: ‘cube’,
 width: 
420,
 height: 
10,
 depth: 
40,
 translate: [
20030510],
 op: ‘
+’,
 }

定义了一个窗z(挖掉Q、一个窗収ͼdQ。一个大H户做好了Q?br />
HTML5 3D机房20


再添加一个略带颜色的透明ȝ。玻璃设|点高光和反,增加“ȝ”感觉Q?/p>


{
    name: 
'ȝL(fng)?/span>',
    type: 
'cube',
    width: 
420,
    height: 
150,
    depth: 
2,
    translate: [
20030500],
    op: 
'+',
    style: {
      
'm.transparent'true,
      
'm.opacity':0.4,
      
'm.color':'#58ACFA',
    },      
  }

Json中玻璃设|了透明度和颜色。这样一个半透明的茶色玻璃就好了Q?br />
HTML5 3D机房21


到这里突然在惻I(x)盖房子如果像写程序一L(fng)单就好了Q所有的E序猿就不会(x)是无房一族单w狗了。当然写E序和盖房子一P(x)该封装好的要装好,最后就是搭U木l装p了。如果盖房子都是从挖土活泥巴开始,那就杯具了。写E序也是一P如果从webgl的main开始写….q?D机房的系l要几个月甚臛_q才能做出来呢?


外侧?/strong>

戉K外侧的两道走廊隔墙,׃是直U墙Q没有复杂走向,直接用立方体定义便可Q?/p>


{
    name: 
'左外?/span>',
    type: 
'cube',
    width: 
20,
    height: 
200,
    depth: 
1300,
    translate: [
-79000],
    op: 
'+',
}

HTML5 3D机房22

再l挖掉中间的H户部分,q添加玻璃:(x)

{
    name: 
'左外墙洞',
    type: 
'cube',
    width: 
30,
    height: 
110,
    depth: 
1300,
    translate: [
-790600],
    op: 
'-',
}
[
/javacsript]
dȝQ?br /> 
{
    name: 
'左外墙玻?/span>',
    type: 
'cube',
    width: 
4,
    height: 
110,
    depth: 
1300,
    translate: [
-790600],
    op: 
'+',
    style: {
      
'm.transparent'true,
      
'm.opacity':0.6,
    },
}

机柜

最后再来点重点的内容:(x)机柜Q以?qing)其中的服务器设备。这才是3D机房里面最l要理的内宏V在我们的实际项目中Q这些资产都是在数据库中存储Qƈ通过json接口加蝲到浏览器中显C。这里ؓ(f)了演C方便,直接写几个机柜的片段Q看一下显C效果?/p>


机柜对象在项目中是这样封装的Q用一个立方体来表C机柜,q加上脓(chung)图。项目中Qؓ(f)了提高显C速度Q机柜一开始ƈ不加载内部服务器内容Q而是只显Cw一个立方体。当用户双击后,?x)触发一个gq加载器Q从服务器端加蝲机柜内部服务器,q加载到对应的位|上。此Ӟ机柜?x)被挖空成一个空心的立方体,以便视觉上更像一个机柜?/p>


定义机柜的json如下Q?/p>


{
    name: 
'机柜',
    type: 
'rack',
    lazy: 
true,
    width: 
70,
    depth: 
100,
    height: 
220,
    translate: [
-3700-250],
    severity: CRITICAL,
  }

上面的机柜定义中Q有一个lazy标记Q标记它是否延迟加蝲其内宏V如果gq加载,则双击触发,否则E序昄时直接加载其内容。Severity是定义了机柜的告警信息,它是否有业务告警。如果有告警Q会(x)用一个气泡显C在机柜的上方,同时机柜也会(x)被染色成告警对应的颜艌Ӏ?br />

HTML5 3D机房30

l箋d更多的机柜:(x)

HTML5 3D机房31

HTML5 3D机房32


讑֤

单v见,q里理的设备假N是机架设备,寸规格比较规整Q因此比较容易在机柜中组l。一个设备的外观定后,在数据库中定义好模板Q加载时Ҏ(gu)其所在机柜的位置攄卛_。这里只是随机生成了几个服务器设备,q按位置摆放。在实际应用中,可以通过手工录入或者智能机架报送的信息来确定服务器的类型和位置?br />
HTML5 3D机房33

如果需要监控到端口U别Q还可以在服务器弹出后,再进一步gq加载设备商的板卡、端口对象,q点dq一步进行配|、监控等操作。当然加载的数据细Q对3D引擎和浏览器的压力会(x)大。可以通过动态gq加?卸蝲{略Q获取一些^衡折中?/div>

到这里,机房基本搭建完成了Q看下效果,比v效果图,是不是有q之而无不及(qing)呢?

HTML5 3D机房35


从显C效果来看,基本不输前面看到的广告公司的效果图,但和它和一张死囄太不一样了Q我们这是一个能操作、能漫游、能~放、有动画、显C流畅、浏览器无需插gp直接打开?D机房程序,׃个json文g和一癑֤行代码和一天的旉搞定了Q还是让人有Ҏ(gu)讶的。不用插件、不?DmaxQ不用模型库Q我喜欢q样q干净净Ua(b)的小E序。小而美、干净而纯_V手机和qx也能用哦Q而且q很畅Q经q优化,场景加蝲已经控制?00毫秒以内Q羃放O怹很流畅。当然技术和化永无止境Q用L(fng)需求也千变万化l늉不绝。但只要我们选择好了技术和工具Q就能事半功倍。Html5是极佳的一个选择?br />
TWaver 3D 机房 完胜效果? src=


需要相关代码的同学可以发邮件到Qtw-service@servasoft.com


TWaver 2016-11-18 10:29 发表评论
]]>HTML5数据可视化第一弹:(x)彩虹爆炸?/title><link>http://www.tkk7.com/TWaver/archive/2016/11/17/431994.html</link><dc:creator>TWaver</dc:creator><author>TWaver</author><pubDate>Thu, 17 Nov 2016 02:52:00 GMT</pubDate><guid>http://www.tkk7.com/TWaver/archive/2016/11/17/431994.html</guid><wfw:comment>http://www.tkk7.com/TWaver/comments/431994.html</wfw:comment><comments>http://www.tkk7.com/TWaver/archive/2016/11/17/431994.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.tkk7.com/TWaver/comments/commentRss/431994.html</wfw:commentRss><trackback:ping>http://www.tkk7.com/TWaver/services/trackbacks/431994.html</trackback:ping><description><![CDATA[<dl><dt><pre><div>25q过MQBrooks博士著名?#8220;没有银弹”的论断依旧没有被打破。HTML5也是一栗但qƈ不妨HTML5是一个越来越有威力的“炸弹”Q发展迅速、势不可挡。随着HTML5技术的普及(qing)Q用HTML5做可视化呈现的项目越来越多了。HTML5的优势明显:(x)|页上直接运行无需插g、手机^板方便兼宏V代码开发和l护相对Ҏ(gu)Q等{。一大L一大L的做Java?NET甚至C++桌面的程序老手们都UL(fng)开始研Ijavascript了,而初庐的C代程序猿更是义无反顾的直奔HTML5q个技术大热点而来?/div></pre></dt></dl><div><br />HTML5늛的技术点很多Q甚臛_g伸到了前端、后端、通讯{各个层面。前端的canvasl图q块无疑是它的核心内宏VCanvas的API虽然不是很复杂很强大Q但是做一般的2dl图基本都够用了。基于这些APIQ一大堆?dl图lgUL(fng)出炉。Echarts、d3.js都是很不错的目。Echarts主要是chartlgQ而d3相对杂一些,很多呈现方式很有创意Q值得研究?/div><dl><dt><br />研究d3的v因是最q有一个项目,用户截了一张效果图让我们用HTML5做一下:(x)</dt></dl><strong></strong><img alt="" src="http://dl2.iteye.com/upload/attachment/0108/7066/d4bd4ccf-071d-3578-a226-9f6518dd4e15.png" /><br /><br /><div><p>看着很眼熟,搜了一下,感觉是d3例子中的sunburst效果Q程序在q里Q?/p><p><a title="http://bl.ocks.org/mbostock/4063423" target="_blank">http://bl.ocks.org/mbostock/4063423</a></p><p><br />看上M乎也不难Q就是一圈一圈的饼图Q把?wi)状l构数据按占比一层一层绘制上d行了。所以引起了自己动手做一个的兴趣?#8220;sunburst”英文里应该是“云开日出”的意思,cM强烈的光芒从云层背后透射出来Q不知ؓ(f)何中文里大多把它译?#8220;日落”。比如这把Fender Telecaster吉他型号是Brown Sunburstƾ,׃(x)被大家翻译成“日落?#8221;?/p></div><div><img alt="" src="http://dl2.iteye.com/upload/attachment/0108/7070/d3a692dc-b93b-35c9-935b-88da652e3c35.jpg" /></div><br /><div>关于日出和日落更喜欢哪一个的问题Q网上还真有q样的调查。有意思的是,选择喜欢日落的远多于选择日出的。日Z表希望,日落代表成熟Q都是一U美Q哪个更要看你个h的心境,因ؓ(f)它的丽是由心生。ؓ(f)了不在这个问题上站错队,我们q是l他重新起一个更加响亮霸气的中文名字Q?#8220;彩虹爆炸?#8221;Q怎么P</div><strong></strong><br /><div>仔细研究一下彩虹爆炸图的结构,无非是一个树(wi)形结构,q用发状的布局。根节点在中_(d)也可以认为没有唯一的根Q而是一堆根节点围绕在第一圈)Q依ơ向外发散排列。每一个节Ҏ(gu)名称、数倹{节点可以按照自w数值在扇区所占比例进行绘Ӟq样׃用管节点具体数值有多大多小了?/div><br /><div><p>q种图最先是由布朗大学教授John T. Stasko设计?br /><a title="http://www.cc.gatech.edu/~john.stasko/" target="_blank">http://www.cc.gatech.edu/~john.stasko/</a></p><p><br />l过一天的折腾Q终于做Z一个还过得去?#8220;彩虹爆炸?#8221;。先上个囄看:(x)<br /></p></div><div><img width="700" height="447" title="点击查看原始大小囄" alt="" src="http://dl2.iteye.com/upload/attachment/0108/7074/3a6dae85-202e-3f07-8fde-d3fea3852f47.png" /></div><br /><strong></strong><div><p>主要功能包括Q?/p><p>-可以通过json来定义数据和样式Q类似百度的echarts那样Q;<br /> -颜色可以固定Q也可以自动彩虹Ԍ<br /> -自动计算数值及(qing)角度占比Q?br /> -动态显C导航\径;<br /> -鼠标动态高亮显C\径;<br /> -动画飞入、展开D路径Q?br /> -文字昄?qing)角度控Ӟ?br /> -全矢量,可鼠标羃放、^U,不失真;</p><p><br />下面重点码一下折腾过E中的几个重点:(x)</p></div><strong></strong><div><h3><strong>一、定义节点对?/strong></h3><p>首先定义每一个小扇片节点。每个扇片可以用一D饼图来l制。ؓ(f)了简单方便,q里用了最单高效偷懒的Ҏ(gu)Q用一个半径很_的U画一D角度的arcQ即可。如下图Q?/p></div><div><img alt="" src="http://dl2.iteye.com/upload/attachment/0108/7076/0f1c62bf-a845-3814-8ccd-78303bef8aa7.png" /></div><div><p>另外q有文字{内宏V所以定义它的jsonl构大概如下Q?/p><pre title="" java;="" ;="" notranslate"=""><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #000000; ">var item </span><span style="color: #000000; ">=</span><span style="color: #000000; "> {name: </span><span style="color: #000000; ">'</span><span style="color: #000000; ">名称</span><span style="color: #000000; ">'</span><span style="color: #000000; ">, color: </span><span style="color: #000000; ">'</span><span style="color: #000000; ">red</span><span style="color: #000000; ">'</span><span style="color: #000000; ">, angle: </span><span style="color: #000000; ">'</span><span style="color: #000000; ">45</span><span style="color: #000000; ">'</span><span style="color: #000000; ">, …};</span></div></pre><p>此外Q下一圈的数据Q可直接定义个节点的“孩子节点”Q直接在item中定义一个data的子节点数据Q?/p><pre title="" java;="" ;="" notranslate"=""><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #000000; ">var item </span><span style="color: #000000; ">=</span><span style="color: #000000; "> {name: </span><span style="color: #000000; ">'</span><span style="color: #000000; ">名称</span><span style="color: #000000; ">'</span><span style="color: #000000; ">, color: </span><span style="color: #000000; ">'</span><span style="color: #000000; ">red</span><span style="color: #000000; ">'</span><span style="color: #000000; ">, angle: </span><span style="color: #000000; ">'</span><span style="color: #000000; ">45</span><span style="color: #000000; ">'</span><span style="color: #000000; ">, data:[<br />{name:’孩子一’, color:’green’,…},<br />{name:’孩子?#8217;, color:’yellow’,…},<br />]};<br /></span></div><strong></strong><em></em><u></u><sub></sub><sup></sup><strike></strike><br /></pre><p>q样可以组成一个树(wi)状结构。接下来要在canvas上绘制图形了。ؓ(f)了方便,q里直接使用了矢量图q行定义Q?/p><pre title="" java;="" ;="" notranslate"=""><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #000000; ">twaver.Util.registerImage(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">node</span><span style="color: #000000; ">'</span><span style="color: #000000; ">, {<br />v: [{<br />shape: </span><span style="color: #000000; ">'</span><span style="color: #000000; ">circle</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,<br />r: <img alt="" src="http://www.tkk7.com/Images/dot.gif" /><br />lineColor: function(data,view){</span><span style="color: #0000FF; ">return</span><span style="color: #000000; "> data.getClient(</span><span style="color: #000000; ">"</span><span style="color: #000000; ">lineColor</span><span style="color: #000000; ">"</span><span style="color: #000000; ">);},<br />lineWidth: <img alt="" src="http://www.tkk7.com/Images/dot.gif" /><br />startAngle: <img alt="" src="http://www.tkk7.com/Images/dot.gif" /><br />endAngle: <img alt="" src="http://www.tkk7.com/Images/dot.gif" /><br />},{<br />shape: </span><span style="color: #000000; ">'</span><span style="color: #000000; ">text</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,<br />textBaseline: </span><span style="color: #000000; ">'</span><span style="color: #000000; ">middle</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,<br />textAlign: <img alt="" src="http://www.tkk7.com/Images/dot.gif" /><br />text: <img alt="" src="http://www.tkk7.com/Images/dot.gif" /><br />x: <img alt="" src="http://www.tkk7.com/Images/dot.gif" /><br />y: <img alt="" src="http://www.tkk7.com/Images/dot.gif" /><br />font: <img alt="" src="http://www.tkk7.com/Images/dot.gif" /><br />fill: <img alt="" src="http://www.tkk7.com/Images/dot.gif" /><br />rotate: <img alt="" src="http://www.tkk7.com/Images/dot.gif" /><br />visible: <img alt="" src="http://www.tkk7.com/Images/dot.gif" /><br />shadow: <img alt="" src="http://www.tkk7.com/Images/dot.gif" /><br />}],<br />});<br /></span></div><strong></strong><em></em><u></u><sub></sub><sup></sup><strike></strike><br /><div>矢量图中定义?个图形元素:(x)一个arc弧线、一个文字对象,分别用于画node和绘制其文字。颜艌Ӏ字体、是否可见、阴影、对齐、位|、线宽、角?#8230;{等均在上面的定义中用一个function动态获取。例如,q个节点的半径,通过下面的方法,可以在囑Ş的lineColor属性中保存q动,需要修改,直接修改lineColorq个client属性即可,而不用去修改l图参数Q非常方便:(x)</div><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #000000; ">r:function(data,view){</span><span style="color: #0000FF; ">return</span><span style="color: #000000; "> data.getClient(</span><span style="color: #000000; ">"</span><span style="color: #000000; ">lineColor</span><span style="color: #000000; ">"</span><span style="color: #000000; ">);}</span></div><strong></strong><em></em><u></u><sub></sub><sup></sup><strike></strike><br /><div><strong><br />二、文字控?/strong></div><br /><div>文字控制也比较啰嗦。首先是寚w方式。最单的方式当然是让文字在所在扇片处Q直接居中、旋转。这h字会(x)在径向的中间位置Q如下图Q?/div><div><img alt="" src="http://dl2.iteye.com/upload/attachment/0108/7086/833c72bd-0f0e-307d-bea5-1bd6d79ed96c.png" /></div><br /></pre></div><strong></strong><div>但这hC感觉ƈ不是很完。对于中文来_(d)如果能统一靠近圆心方向的位|对齐,?x)更好看一些。这P即文字q长Q也?x)向外g伸,不会(x)和里面的重叠。如下图Q?br /><br /><div><img width="700" height="309" title="点击查看原始大小囄" alt="" src="http://dl2.iteye.com/upload/attachment/0108/7088/a05039b2-ddd8-3636-857a-4c9ee8cb6830.png" /></div><br /><div>q有Q当文字在左半圆Ӟ如果不做Ҏ(gu)处理Q文字旋转会(x)D文字大头朝下Q阅读v来有把脖子歪断的风险。所以应该动态判断,如果文字在左侧,应该文字再增加旋?80度。同时左侧的文字寚w也要Ҏ(gu)考虑Q应该变成右寚wQ才能保持径向的整齐一致?/div><br /><div><img alt="" src="http://dl2.iteye.com/upload/attachment/0108/7080/749363d6-9c9b-324a-8204-95f8248461d3.png" /></div><br /><div>文字q有一个细节就是颜色和阴媄(jing)的问题。不使用阴媄(jing)Q单U的使用颜色Q例如白ԌQ则在一些方向上的节点的文字?x)看不清楚,因?f)我们做的是彩虹爆炸图Q各个方向颜色都不一P而且q会(x)随着圈数增加而变淡颜Ԍ所以几乎不可能用一个固定的颜色Q例如白色或黑色Q能保证文字在所有地斚w能和node颜色搭配q看清楚。所以思来惛_q是使用了阴影效果?br /><br /><div><img alt="" src="http://dl2.iteye.com/upload/attachment/0108/7084/8549ea35-805f-3ad9-abc9-7936287b88c8.png" /></div></div><strong></strong></div><strong></strong><div>联想了一下我们看剧时候的字幕Q似乎也是同L(fng)问题。视频字q要昄在千变万化的视频场景里面Q视频场景的颜色完全随机出现无从知晓Q要惌字幕看清楚,必然也会(x)想一些办法解冟뀂我们仔l观察一下视频字q:(x)</div><br /><div><img alt="" src="http://dl2.iteye.com/upload/attachment/0108/7092/0d9039a9-2ca9-3c43-b265-b7a59f88e9fc.png" /></div><br /><div>仔细观察Q字q是白色文字加了一圈黑色外框,q样׃怕Q何场景了。我们在文字定义时也模拟一下,讄阴媄(jing)和阴影偏U试一试:(x)</div><br /><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #000000; ">fill:</span><span style="color: #000000; ">'</span><span style="color: #000000; ">white</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,<br />shadow: {<br />offsetX: </span><span style="color: #000000; ">2</span><span style="color: #000000; ">,<br />offsetY: </span><span style="color: #000000; ">2</span><span style="color: #000000; ">,<br />blur: </span><span style="color: #000000; ">4</span><span style="color: #000000; ">,<br />color: </span><span style="color: #000000; ">'</span><span style="color: #000000; ">black</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,<br />},<br /></span></div><br /><div>看一下用前和用后的效果对比:(x)</div><br /><div><img alt="" src="http://dl2.iteye.com/upload/attachment/0108/7095/c1926dd0-5beb-30ae-8691-9d14dd2aeefe.png" /></div><br /><div>使用阴媄(jing)后不但文字更清晰了,而且也增加了立体感,效果q是不错的。下面图昄应用在节点上的效果:(x)</div><strong></strong><br /><div><img style="line-height: 1.5;" alt="" src="http://dl2.iteye.com/upload/attachment/0108/7097/63cbbfe7-a47a-36e4-b238-8c7023ba0b30.png" /></div><br /><div>可见不论什么颜Ԍ都能比较好的勑֋出文字轮廓,保持清晰可读?/div><div><h3><strong>三、生成彩虚w?/strong></h3><strong></strong><p><strong></strong></p><p>关于颜色Q是一个有的话题。对于广大程序猿来说Q颜色是一个既单又困难的东ѝ我们随手就能写?#8217;red’, ‘green’, ‘orange’, ‘yellow’q样的色彩斑斓的颜色Q还能保证没有语法错误;我们q会(x)?#8217;#FF55AA’?#8217;#0c0’?#8217;RGBQ?,204,0Q?#8217;?#8217; RGBQ?Q,80Q,0Q)’q样的各U颜色写法;我们也明白RGBA的含义和用途。但是,我们很少能把一个demo写的颜色很好看、很搭配。关于颜色和配色以后再专门讨论。这里我们只惌动生成一圈彩虹一L(fng)颜色。用我们熟?zhn)的RGBҎ(gu)好像比较困难了。于是想起了那个HSV的颜色定义方法,它貌似很适合解决q个问题?br /><br /></p></div><div><img alt="" src="http://dl2.iteye.com/upload/attachment/0108/7100/b54a30ec-3215-3e9d-8b65-d0aff414e9fe.png" /></div><strong></strong><br /><div><p>HSV颜色模型定义了色调H、饱和度S和亮度VQ由A. R. Smith?978q创建的一U颜色空间。其中H用一?60度表C所有颜Ԍ从红色开始按逆时针方向计,U色?度。饱和度S??Q越大越饱和。亮度V??55Q也可以转换Z0?Q方便用)Q越大越明亮Q越越暗E?/p><p>Js里面q没有直接处理HSV颜色的函数。不q用下面的代码很方便可以从hsv转ؓ(f)rgbQ?br /><br /></p></div><div><img alt="" src="http://dl2.iteye.com/upload/attachment/0108/7102/c4f24302-5df2-3896-82da-14281b46a9ff.png" /></div><strong></strong><br /><div>写一个对应的js函数也很单:(x)</div><br /><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #008000; ">/*</span><span style="color: #008000; "> h, s, v (0 ~ 1) </span><span style="color: #008000; ">*/</span><span style="color: #000000; "><br />function getHSVColor(h, s, v) {<br />var r, g, b, i, f, p, q, t;<br /></span><span style="color: #0000FF; ">if</span><span style="color: #000000; "> (h </span><span style="color: #000000; ">&</span><span style="color: #000000; ">amp;</span><span style="color: #000000; ">&</span><span style="color: #000000; ">amp; s </span><span style="color: #000000; ">===</span><span style="color: #000000; "> undefined </span><span style="color: #000000; ">&</span><span style="color: #000000; ">amp;</span><span style="color: #000000; ">&</span><span style="color: #000000; ">amp; v </span><span style="color: #000000; ">===</span><span style="color: #000000; "> undefined) {<br />s </span><span style="color: #000000; ">=</span><span style="color: #000000; "> h.s, v </span><span style="color: #000000; ">=</span><span style="color: #000000; "> h.v, h </span><span style="color: #000000; ">=</span><span style="color: #000000; "> h.h;<br />}<br />i </span><span style="color: #000000; ">=</span><span style="color: #000000; "> Math.floor(h </span><span style="color: #000000; ">*</span><span style="color: #000000; "> </span><span style="color: #000000; ">6</span><span style="color: #000000; ">);<br />f </span><span style="color: #000000; ">=</span><span style="color: #000000; "> h </span><span style="color: #000000; ">*</span><span style="color: #000000; "> </span><span style="color: #000000; ">6</span><span style="color: #000000; "> </span><span style="color: #000000; ">-</span><span style="color: #000000; "> i;<br />p </span><span style="color: #000000; ">=</span><span style="color: #000000; "> v </span><span style="color: #000000; ">*</span><span style="color: #000000; "> (</span><span style="color: #000000; ">1</span><span style="color: #000000; "> </span><span style="color: #000000; ">-</span><span style="color: #000000; "> s);<br />q </span><span style="color: #000000; ">=</span><span style="color: #000000; "> v </span><span style="color: #000000; ">*</span><span style="color: #000000; "> (</span><span style="color: #000000; ">1</span><span style="color: #000000; "> </span><span style="color: #000000; ">-</span><span style="color: #000000; "> f </span><span style="color: #000000; ">*</span><span style="color: #000000; "> s);<br />t </span><span style="color: #000000; ">=</span><span style="color: #000000; "> v </span><span style="color: #000000; ">*</span><span style="color: #000000; "> (</span><span style="color: #000000; ">1</span><span style="color: #000000; "> </span><span style="color: #000000; ">-</span><span style="color: #000000; "> (</span><span style="color: #000000; ">1</span><span style="color: #000000; "> </span><span style="color: #000000; ">-</span><span style="color: #000000; "> f) </span><span style="color: #000000; ">*</span><span style="color: #000000; "> s);<br /></span><span style="color: #0000FF; ">switch</span><span style="color: #000000; "> (i </span><span style="color: #000000; ">%</span><span style="color: #000000; "> </span><span style="color: #000000; ">6</span><span style="color: #000000; ">) {<br /></span><span style="color: #0000FF; ">case</span><span style="color: #000000; "> </span><span style="color: #000000; ">0</span><span style="color: #000000; ">: r </span><span style="color: #000000; ">=</span><span style="color: #000000; "> v, g </span><span style="color: #000000; ">=</span><span style="color: #000000; "> t, b </span><span style="color: #000000; ">=</span><span style="color: #000000; "> p; </span><span style="color: #0000FF; ">break</span><span style="color: #000000; ">;<br /></span><span style="color: #0000FF; ">case</span><span style="color: #000000; "> </span><span style="color: #000000; ">1</span><span style="color: #000000; ">: r </span><span style="color: #000000; ">=</span><span style="color: #000000; "> q, g </span><span style="color: #000000; ">=</span><span style="color: #000000; "> v, b </span><span style="color: #000000; ">=</span><span style="color: #000000; "> p; </span><span style="color: #0000FF; ">break</span><span style="color: #000000; ">;<br /></span><span style="color: #0000FF; ">case</span><span style="color: #000000; "> </span><span style="color: #000000; ">2</span><span style="color: #000000; ">: r </span><span style="color: #000000; ">=</span><span style="color: #000000; "> p, g </span><span style="color: #000000; ">=</span><span style="color: #000000; "> v, b </span><span style="color: #000000; ">=</span><span style="color: #000000; "> t; </span><span style="color: #0000FF; ">break</span><span style="color: #000000; ">;<br /></span><span style="color: #0000FF; ">case</span><span style="color: #000000; "> </span><span style="color: #000000; ">3</span><span style="color: #000000; ">: r </span><span style="color: #000000; ">=</span><span style="color: #000000; "> p, g </span><span style="color: #000000; ">=</span><span style="color: #000000; "> q, b </span><span style="color: #000000; ">=</span><span style="color: #000000; "> v; </span><span style="color: #0000FF; ">break</span><span style="color: #000000; ">;<br /></span><span style="color: #0000FF; ">case</span><span style="color: #000000; "> </span><span style="color: #000000; ">4</span><span style="color: #000000; ">: r </span><span style="color: #000000; ">=</span><span style="color: #000000; "> t, g </span><span style="color: #000000; ">=</span><span style="color: #000000; "> p, b </span><span style="color: #000000; ">=</span><span style="color: #000000; "> v; </span><span style="color: #0000FF; ">break</span><span style="color: #000000; ">;<br /></span><span style="color: #0000FF; ">case</span><span style="color: #000000; "> </span><span style="color: #000000; ">5</span><span style="color: #000000; ">: r </span><span style="color: #000000; ">=</span><span style="color: #000000; "> v, g </span><span style="color: #000000; ">=</span><span style="color: #000000; "> p, b </span><span style="color: #000000; ">=</span><span style="color: #000000; "> q; </span><span style="color: #0000FF; ">break</span><span style="color: #000000; ">;<br />}<br />var rgb</span><span style="color: #000000; ">=</span><span style="color: #000000; ">'</span><span style="color: #000000; ">#</span><span style="color: #000000; ">'</span><span style="color: #000000; ">+</span><span style="color: #000000; ">toHex(r </span><span style="color: #000000; ">*</span><span style="color: #000000; "> </span><span style="color: #000000; ">255</span><span style="color: #000000; ">)</span><span style="color: #000000; ">+</span><span style="color: #000000; ">toHex(g </span><span style="color: #000000; ">*</span><span style="color: #000000; "> </span><span style="color: #000000; ">255</span><span style="color: #000000; ">)</span><span style="color: #000000; ">+</span><span style="color: #000000; ">toHex(b </span><span style="color: #000000; ">*</span><span style="color: #000000; "> </span><span style="color: #000000; ">255</span><span style="color: #000000; ">);<br /></span><span style="color: #0000FF; ">return</span><span style="color: #000000; "> rgb;<br />}<br /></span></div><br /><div>再回到我们的彩虹爆炸图。每一个节点对应的所在角度(中心角度Q决定了它自q颜色倹{所以,我们可以直接Ҏ(gu)q个角度得到颜色的h。然后,Z让彩虚w渐一圈一圈变淡,再把s饱和度从1逐圈递减Q例?.1Q,产生变E的效果。ؓ(f)了防止圈太多最后看不清Q减?.2?.3左右可以停止递减?/div><br /><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #000000; ">var fromAngle</span><span style="color: #000000; ">=</span><span style="color: #000000; ">node.getClient(‘fromAngle’);<br />var toAngle</span><span style="color: #000000; ">=</span><span style="color: #000000; ">node.getClient(‘toAngle’);<br />var level</span><span style="color: #000000; ">=</span><span style="color: #000000; ">node.getClient(‘level’);</span><span style="color: #008000; ">//</span><span style="color: #008000; ">节点在第几圈</span><span style="color: #008000; "><br /></span><span style="color: #000000; ">var h </span><span style="color: #000000; ">=</span><span style="color: #000000; "> (fromAngle</span><span style="color: #000000; ">+</span><span style="color: #000000; ">to)</span><span style="color: #000000; ">/</span><span style="color: #000000; ">2</span><span style="color: #000000; "> </span><span style="color: #000000; ">%</span><span style="color: #000000; "> </span><span style="color: #000000; ">360</span><span style="color: #000000; "> </span><span style="color: #000000; ">/</span><span style="color: #000000; ">360</span><span style="color: #000000; ">; </span><span style="color: #008000; ">//</span><span style="color: #008000; ">中心角度Qƈ转换为弧?/span><span style="color: #008000; "><br /></span><span style="color: #000000; ">var s </span><span style="color: #000000; ">=</span><span style="color: #000000; "> Math.max(</span><span style="color: #000000; ">0.2</span><span style="color: #000000; ">, </span><span style="color: #000000; ">1</span><span style="color: #000000; ">-</span><span style="color: #000000; ">level</span><span style="color: #000000; ">*</span><span style="color: #000000; ">0.1</span><span style="color: #000000; ">);</span><span style="color: #008000; ">//</span><span style="color: #008000; ">每圈s递减0.1Q直?.2为止</span><span style="color: #008000; "><br /></span><span style="color: #000000; ">var v</span><span style="color: #000000; ">=</span><span style="color: #000000; ">1</span><span style="color: #000000; ">;<br />var color</span><span style="color: #000000; ">=</span><span style="color: #000000; ">getHSVColor(h, s, v);</span></div><br /><div>q样p得了一圈颜艌Ӏ实验效果如下:(x)</div><br /><div><img alt="" src="http://dl2.iteye.com/upload/attachment/0108/7104/81268710-58e9-33fd-a8cf-5fb39697ebfd.png" /></div><div><br />如果相对某个节点的颜色做Ҏ(gu)处理Q例如强制用色来凸显,我们可以在数据中定义时加个标讎ͼ讄颜色时候直接用而不用计即可?/div><br /><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #000000; ">{name:</span><span style="color: #000000; ">'</span><span style="color: #000000; ">东新区</span><span style="color: #000000; ">'</span><span style="color: #000000; ">, value: </span><span style="color: #000000; ">2600</span><span style="color: #000000; ">, color: </span><span style="color: #000000; ">'</span><span style="color: #000000; ">#FE9A2E</span><span style="color: #000000; ">'</span><span style="color: #000000; ">}<br /></span></div><br /><br /><div><img alt="" src="http://dl2.iteye.com/upload/attachment/0108/7106/a564887d-55ad-3ecc-b33b-326a62f2d793.png" /></div><br /><div><p>接下来要实现鼠标划过节点Q自动计\径、高亮\径节炏V暗淡非路径节点。ؓ(f)了方便\径寻找,E序把每个节点的下一圈子数据定义为子节点Q子节点通过getParent()函数可以直接获得父对象。这P通过不断getParent可以获得整个\径上的节点,q修改其颜色为预NԌ实现高亮效果Q?br /><br /></p><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #000000; ">var node</span><span style="color: #000000; ">=</span><span style="color: #000000; ">highlightedNode;<br /></span><span style="color: #0000FF; ">while</span><span style="color: #000000; ">(node){<br />node.setClient(‘color’, node.getClient(‘color.original’));<br />node</span><span style="color: #000000; ">=</span><span style="color: #000000; ">node.getParent();<br />}<br /></span></div><pre title="" java;="" ;="" notranslate"=""></pre><p>对于非\径节点的颜色Q可以设|ؓ(f)预设颜色但饱和度?.1的E颜色 Q让它变淡,以便H出高亮路径Q?/p></div><br /><strong></strong><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #000000; ">var color </span><span style="color: #000000; ">=</span><span style="color: #000000; "> getHSVColor(h, </span><span style="color: #000000; ">0.1</span><span style="color: #000000; ">, v);<br />node.setClient(‘color’, color);<br /></span></div><br /><div><strong>四、动L?/strong><br /><br /><div>最后,Z囑Ş更生动,使用了一些动L果。首先想到的是囑Ş出来时候,用动M到大发散开来,?x)很动感。这样做需要用动画函数来驱动每一个节点的半径位置Q从0增加到所在的半径位置Q如果大家一赯|,整个囑ְ?x)动h。这里用了一个动d数来驱动Qƈ使用了网上常用的easing函数来控Ӟ避免U性的动画太死板:(x)</div><strong></strong></div><strong></strong><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #0000FF; ">new</span><span style="color: #000000; "> Animate({<br />from: </span><span style="color: #000000; ">0</span><span style="color: #000000; ">,<br />to: </span><span style="color: #000000; ">1</span><span style="color: #000000; ">,<br />dur: </span><span style="color: #000000; ">3000</span><span style="color: #000000; ">+</span><span style="color: #000000; ">level</span><span style="color: #000000; ">*</span><span style="color: #000000; ">100</span><span style="color: #000000; ">,<br />easing: </span><span style="color: #000000; ">'</span><span style="color: #000000; ">elasticOut</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,<br />onUpdate: function (value) {<br />node.setLocation(</span><span style="color: #000000; ">'</span><span style="color: #000000; ">pie.location’, value);</span><span style="color: #000000; "><br /></span><span style="color: #000000; ">},<br />}).play();<br /></span></div><br /><div><p>上面定义的动画,?U钟跑完Q用’elasticOut’的easing方式。每一帧,修改node的位|信息。这样就完成了橡皮筋一L(fng)环Ş弹出散开效果?/p><p>另外Q导航条的出来也比较H兀Q这里也使用一下动画,让它从左到右慢慢伸出Q?/p></div><br /><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #0000FF; ">new</span><span style="color: #000000; "> Animate({<br />from: {x:x1, y:y1},<br />to: {x:x2, y:y2},<br />delay:</span><span style="color: #000000; ">50</span><span style="color: #000000; ">,<br />type: </span><span style="color: #000000; ">'</span><span style="color: #000000; ">point</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,<br />dur: </span><span style="color: #000000; ">1000</span><span style="color: #000000; ">,<br />easing: </span><span style="color: #000000; ">'</span><span style="color: #000000; ">bounceOut</span><span style="color: #000000; ">'</span><span style="color: #000000; ">,<br />onUpdate: function (value) {<br />node.setCenterLocation(value.x, value.y);<br />},<br />}).play();<br /></span></div><br /><div>和上一个动ȝ不同之处在于q里使用了{x、y}的pointl构Q每一帧直接更新节点位|。同时设|了50毫秒的delayQ让动画有一点点_性停滞,不至于太H兀。效果不错?/div><br /><img width="672" height="363" alt="" src="http://www.tkk7.com/images/blogjava_net/twaver/dc0a3133-e830-38a6-a4a2-0c52225af536.png" border="0" /><br /><br /><div>xQ彩虹爆炸图基本上就做的差不多了。用v来也很简单,只要准备一些json数据可以了Q下面是一些有的数据做出来的效果。感兴趣的同学可以联pL们烦(ch)取代码?br /><br /><img alt="" src="http://www.tkk7.com/images/blogjava_net/twaver/6a474a5b-26e6-39ab-af94-ecc7f160a377.png" border="0" /></div><br /><div>实际应用在项目中的示意图?/div><br /><img width="592" height="348" alt="" src="http://www.tkk7.com/images/blogjava_net/twaver/edf1191f-a6eb-3569-a09d-09fbe8719b42.png" border="0" /><br /><br /><div>如果(zhn)也希望在项目中用一下彩虹爆炸图Q欢q给我们发邮件烦(ch)取:(x)tw-service@servasoft.com</div><img src ="http://www.tkk7.com/TWaver/aggbug/431994.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.tkk7.com/TWaver/" target="_blank">TWaver</a> 2016-11-17 10:52 <a href="http://www.tkk7.com/TWaver/archive/2016/11/17/431994.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>HTML5复杂拓扑图(五) Reingold Tilford?/title><link>http://www.tkk7.com/TWaver/archive/2015/05/22/425237.html</link><dc:creator>TWaver</dc:creator><author>TWaver</author><pubDate>Fri, 22 May 2015 09:37:00 GMT</pubDate><guid>http://www.tkk7.com/TWaver/archive/2015/05/22/425237.html</guid><wfw:comment>http://www.tkk7.com/TWaver/comments/425237.html</wfw:comment><comments>http://www.tkk7.com/TWaver/archive/2015/05/22/425237.html#Feedback</comments><slash:comments>2</slash:comments><wfw:commentRss>http://www.tkk7.com/TWaver/comments/commentRss/425237.html</wfw:commentRss><trackback:ping>http://www.tkk7.com/TWaver/services/trackbacks/425237.html</trackback:ping><description><![CDATA[前段旉Q有个项目需要显CZ个很大的?wi)Ş拓扑l构图,而布局怎么都不好看。要生成一颗比较布局规矩、好看的?wi)状图,一个成熟、高效的?wi)Ş布局法必不可少。Reingold Tilford是常用的一个,大家可以google一下。这个算法最先是由Edward Reingold和John Tilford一起发表的Qƈ׃们的名字命名。有兴趣的同学,可以研究一下这?981q的论文Q?a >http://emr.cs.iit.edu/~reingold/tidier-drawings.pdf</a>Q里面给Zq个法的原理和逻辑代码。这个算法的优点是逻辑相对单,效率高。不q用js写一遍也要消耗很多脑l胞(yu)。还要,twaver直接提供了这U算法和自动布局Q我们可以直接用? 下面看一看这U布局的用途。利用Reingold Tilford?wi)算法,我们可以把一个树(wi)形结构的数据Q用不重叠、紧凑、分层的形式展示出来。最直接的用法就是直接生成一从左到右的?wi),如下图?x) <img class="alignnone size-medium wp-image-9715" src="http://twaver.servasoft.com/wp-content/uploads/2015/05/HTML5拓扑?-640x363.png" alt="HTML5拓扑?" width="640" height="363" /> <br />图比较长Q所以我们咔嚓了一刀Q下面是后面一半的图:(x)<br />     <img class="alignnone size-medium wp-image-9716" src="http://twaver.servasoft.com/wp-content/uploads/2015/05/HTML5拓扑?-640x412.png" alt="HTML5拓扑?" width="640" height="412" />   <br />其实RT?wi)也可以做各U变化。例如我们把U向旋{成一圈进行排列,׃(x)形成环Ş的RT?wi)?x) <br /><img class="alignnone size-medium wp-image-9717" src="http://twaver.servasoft.com/wp-content/uploads/2015/05/HTML5拓扑?-516x480.png" alt="HTML5拓扑?" width="516" height="480" /> <br />看到q些Q我们可能会(x)惌vD3.js。D3也可以做些图形效果。相比之下,twaver使用h?x)比较简单,两行代码可以调用Q意Ş状的自动布局法Q? <br /><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #008080; ">1</span> <span style="color: #008000; ">//</span><span style="color: #008000; ">创徏Autolayouterq绑定DataBox</span><span style="color: #008000; "><br /></span><span style="color: #008080; ">2</span> <span style="color: #008000; "></span><br /><span style="color: #008080; ">3</span> <span style="color: #0000FF; ">var</span> autoLayouter = <span style="color: #0000FF; ">new</span> twaver.layout.AutoLayouter(box);<br /><span style="color: #008080; ">4</span> <br /><span style="color: #008080; ">5</span> <span style="color: #008000; ">//</span><span style="color: #008000; ">开始布局,参数分别为布局cd和回掉函?/span><span style="color: #008000; "><br /></span><span style="color: #008080; ">6</span> <span style="color: #008000; "></span><br /><span style="color: #008080; ">7</span> autoLayouter.doLayout(type,callback);</div><br />另外Q在实际目使用中,数据往往需要多UŞ式进行展玎ͼ例如?wi)、表格等配合拓扑图进行一体的、全方位的展C。这时twaver的优势就比较明显了?br />下面q张图,数据通过双的拓扑图和左边的?wi)同时展C,甚至?wi)上直接提供了勾选功能,选中后拓扑图也会(x)跟着选中Q深色阴影)。这U应用在twaver里面可以直接new一个Tree和NetworkQ与同一个box兌卛_。用D3估计q要其它的树(wi)lgq做交互同步Q可能比较麻?ch)? <br /><img class="alignnone size-medium wp-image-9718" src="http://twaver.servasoft.com/wp-content/uploads/2015/05/HTML5拓扑布局-640x364.png" alt="HTML5拓扑布局" width="640" height="364" />   <br />不论哪种技术和产品Q只要适合我们的用需求就好。简单、轻量、好用,是好品? <br />需要源代码的同学请与我们联pȝ(ch)? info@servasoft.com<br /><br /><br /><img src ="http://www.tkk7.com/TWaver/aggbug/425237.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.tkk7.com/TWaver/" target="_blank">TWaver</a> 2015-05-22 17:37 <a href="http://www.tkk7.com/TWaver/archive/2015/05/22/425237.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>HTML5复杂拓扑图(四) l织l构?/title><link>http://www.tkk7.com/TWaver/archive/2015/05/22/425236.html</link><dc:creator>TWaver</dc:creator><author>TWaver</author><pubDate>Fri, 22 May 2015 09:33:00 GMT</pubDate><guid>http://www.tkk7.com/TWaver/archive/2015/05/22/425236.html</guid><wfw:comment>http://www.tkk7.com/TWaver/comments/425236.html</wfw:comment><comments>http://www.tkk7.com/TWaver/archive/2015/05/22/425236.html#Feedback</comments><slash:comments>1</slash:comments><wfw:commentRss>http://www.tkk7.com/TWaver/comments/commentRss/425236.html</wfw:commentRss><trackback:ping>http://www.tkk7.com/TWaver/services/trackbacks/425236.html</trackback:ping><description><![CDATA[应广大客h需Q今天给大家带来一Ƅl结构图。组l结构图的呈现方式多U多P用途也是非常广泛,可以应用于集团内部,企业各部门之间的l织关系呈现。我们就来看看twaver实现出来的效果? 上下布局Q? 圆Ş布局Q? q些布局用twaver来实现是非常的合适,实现h也是很容易,twaver内部提供了多种布局方式Q自左向叻I从下向上Q具体可以看twaver的官Ҏ(gu)档介l。这里就不多说了Q今天我们着重说一下twaver如果实现上图中的|元。先攑֤看看效果Q? q里借用了女的范冰冰头像。我们假设范冰冰(ch)务部出纳Q我惌爷做(ch)务部ȝ也是当之无愧的,从刚开始的北漂到后来的一夜狂?千万。现在的C会(x)Q只要有钱投资了房后半辈子׃用愁了,闲话不多扯。这里我们采用的是名片式的方式来呈现l织图上的每个网元,左侧一张图片,右侧是职Uͼq种矢量和位囄l合效果也是非常赞的。那么这U网元如何来实现呢?首先我们需要定义一个圆角矩? twaver.Util.registerImage('employee', { w: 200, h: 135, cache: false, origin: {x:0, y:0}, v: [{ shape: 'rect', w: '100%', h: '100%', r: 8, lineColor:'black', lineWidth:2.5, fill: '#F5ECCE', }], }); 在圆角矩形的右侧放上文字Q? { shape: 'text', text: '<%=getClient("text")%>', font: '12px "Microsoft Yahei"', translate: {x:150,y:135/2}, } translate是将文字q移到指定的位置Q这里我们需要放在右侧,因此需要设|偏叻IxQy是相对于|元左上角原Ҏ(gu)讄的? 接下来需要在左侧攄一个椭圆用于放l织节点的照片,q里的椭圆可以直接用path来描q?? { shape: 'path', data: 'M-45,-25Q-45,-64,0,-64Q45,-64,45,-25L45,25Q45,64,0,64Q-45,64,-45,25z', lineColor:'#BBBBBB', lineWidth:1, translate: {x: 60, y:135/2} } data用于描述path的\径,q里面的MQQQL分别代表movetoQquadraticCurveTo和linetoQ比如M-45Q就是移动到-45的位|上。具体的含义可以参考TWaver的官Ҏ(gu)档? 接下来需要加上员工的囄Q图片这里采用的是一般的位图Q位N要注册后才能使用。由于原始图片是方Ş的,需要裁减出圆角矩Ş的ŞӞ说到裁减Qtwaver的矢量描qC支持clipQ默认是不clipQ设|clip之后Q就?x)将出矢量囄之外的区域的q行裁剪Q可以用shape来描q裁减的区域Q这里我们需要裁剪出圆角矩ŞQ因此设|和上面矩Ş相同的path路径卛_? twaver.Util.registerImage('clip_pic', { w: 128, h: 128, cache: false, clip: { shape: 'path', data: 'M-45,-25Q-45,-64,0,-64Q45,-64,45,-25L45,25Q45,64,0,64Q-45,64,-45,25z', }, v: [{ shape: 'image', x:-64, y:-64, name: '<%=getClient("pic")%>', }], }); 关于clip的更多用,可以参考下面的文档Q? html5-canvas-clipping-region-tutorial canvas-clip-image-in-a-circle 好了Q一个组l结构图的网元就q样L实现。最后随机造一些数据可以看到整体效果了 惌具体demo的小伙伴Q请发邮件至tw-service#servasoft.comQ我们会(x)完整代码发送给(zhn)? <img src ="http://www.tkk7.com/TWaver/aggbug/425236.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.tkk7.com/TWaver/" target="_blank">TWaver</a> 2015-05-22 17:33 <a href="http://www.tkk7.com/TWaver/archive/2015/05/22/425236.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>HTML5复杂拓扑图(三) 可展流E图http://www.tkk7.com/TWaver/archive/2015/05/22/425234.htmlTWaverTWaverFri, 22 May 2015 09:29:00 GMThttp://www.tkk7.com/TWaver/archive/2015/05/22/425234.htmlhttp://www.tkk7.com/TWaver/comments/425234.htmlhttp://www.tkk7.com/TWaver/archive/2015/05/22/425234.html#Feedback0http://www.tkk7.com/TWaver/comments/commentRss/425234.htmlhttp://www.tkk7.com/TWaver/services/trackbacks/425234.html互联|购物成了当今非常热门的话题Q各U购物网站,手机APP如雨后春W般涌现出来。什么买衣服Q买水果Q买cI买a(b)都得C解决Q自从有了这些appQ再也不用去市排着长的队伍,扛着重货物Q骑着篏的R子了。之前每Z门C西简直是跟参加了一场马拉松似的Q现在好了,直接送货到家。那么在购物的背后又有什么样的流E呢Q今天我们给大家介绍的是TWaver的另一ƾ流E图? 说到TWaver的流E图却是层出不穷Q千姿百态?D的,3D的,静态的Q动态的。这ơ要l大家呈现的是一Ƒօ矢量的,非常清新优美的流E图。先l大家看看效果:(x) workflow

看到q样的图Q是不是觉得不就是用了几张脓(chung)囑֘Q如果这hQ那么你对twaverq是有所了解的。前面我们已l提CQ这是一Ƒօ矢量的流E图Q这里可没有用到M贴图哦,下面q些|元都是矢量描述出来的,~放不失真。接下来我们来介绍一下如何矢量描q这些网元呢Q?/h4> process-element split joint-element link arrow

q里我们以第一个ؓ(f)例,来介l如何用矢量来描q这个元素,首先我们需要画一个圆角正方ŞQƈ且颜色是E微带点渐变Ԍ我们q里采用了线性渐变,中间是灰Ԍ两边白色Q代码如下:(x)

 1 twaver.Util.registerImage('process', {
 2         w: 48,
 3         h: 42,
 4         lineWidth:1,
 5         lineColor: '#848484',
 6         v: [{
 7             shape: 'rect',
 8             w: 42,
 9             h: 36,
10             x: -21,
11             y: -18,
12             r: 4,
13             gradient: {
14                 type: 'linear',
15                 x1: 0,
16                 y1: -25,
17                 x2: 0,
18                 y2: 25,
19                 stop: [{
20                     offset: 0,
21                     color: 'white'
22                 },{
23                     offset: 0.4,
24                     color: '#D8D8D8'
25                 },{
26                     offset: 1,
27                     color: 'white'
28                 }]
29             }
30         }]
31     });

看下q行后的效果Q?/h4>
vector

接着按照q种方式M间的色方块,一L(fng)道理Q也是中间画个圆角矩形,用了色的渐变:(x)

 1 {
 2             shape: 'rect',
 3             w: 36,
 4             h: 30,
 5             x: -18,
 6             y: -15,
 7             r: 3,
 8             gradient: {
 9                 type: 'linear',
10                 x1: 0,
11                 y1: -20,
12                 x2: 0,
13                 y2: 25,
14                 stop: [{
15                     offset: 0,
16                     color: 'white'
17                 },{
18                     offset: 0.4,
19                     color: '#B45F04'
20                 },{
21                     offset: 1,
22                     color: 'white'
23                 }]
24             }
25         }

vector image

最后就是中间几条线了,可以采用path来描qͼ自己d每个像素点,代码如下Q?/h4>
1 {
2             shape: 'path',
3             data: 'M-12,-8l4,0m2,0l12,0M-9,-3l4,0m2,0l12,0M-6,2l4,0m2,0l12,0M-9,7l4,0m2,0l12,0',
4             lineWidth: 1.5,
5             lineColor: '#F2F2F2',
6         }

写到q里Q你?x)不会(x)觉得怎么现在弄个矢量的图片这么复杂,像素啥的q要自己来算。如果什么都自己qԌ那么自己是不是也可以当美工了。哈哈哈Q如果你觉得可以Q一些简单的工zL不用求别ZQ自׃能干。但是如果你觉得复杂Q也可以直接用美工提供的svg囄Q通过twaver的{换器直接转换Z面的q些代码? 矢量囄先讲到这里,我们再来看link上是如何d一个箭头的Q就是下面的q种效果Q?/h4> link arrow

q里我们用到了link的icon附gQlink上icon的附件也可以用矢量哦Q是不是很赞Q?br />
1 link.setStyle('icons.names', ['link_arrow']);

q里?link_arrow'是我们注册的矢量图片名U? 加了q线的矢量,q线的走向也需要自己定义一下。这里通过linkpath来定?network上提供了讄linkpath的方法:(x)

1 network.setLinkPathFunction(createLinkPath);

q线的走向我们这里采用了先水q_垂直的方式,也可以加上水q的偏移的|q样我们可以控制q线的拐炏V?/h4> link path

双击展开Q合q动?/strong>

q款程图,最大的特点是可以合q展开子流E,q可以指定合q时收v哪些点,合ƈ后的效果如下Q?/h4> collapse workflow

q样程囑ְ?x)清晰很多,如果不想看中间复杂的子流E合qv来就可以了? q里的我们录制了一个视频供大家ƣ赏Q?  

感兴的朋友可以发邮件到tw-service#servasoft.comQ我们会(x)完整代码呈现给(zhn)?/h4>

TWaver 2015-05-22 17:29 发表评论
]]>HTML5复杂拓扑图(二) 关系|图http://www.tkk7.com/TWaver/archive/2015/05/22/425232.htmlTWaverTWaverFri, 22 May 2015 09:06:00 GMThttp://www.tkk7.com/TWaver/archive/2015/05/22/425232.htmlhttp://www.tkk7.com/TWaver/comments/425232.htmlhttp://www.tkk7.com/TWaver/archive/2015/05/22/425232.html#Feedback0http://www.tkk7.com/TWaver/comments/commentRss/425232.htmlhttp://www.tkk7.com/TWaver/services/trackbacks/425232.html关系|图的呈现方式多U多P今天我们l大家分享的是和弦式的关pȝ图,先来看看效果Q? chord-1

例子中我们展C的是各部门员工之间的复杂关pd。在公司内部Q不仅部门内部员工之间发生着关系往来,部门和部门之间的员工也在发生q各U往来关pR如果你q是用原先的那种表格来呈玎ͼ昄很难直观看出各种关系Q用囑Ş化的拓扑呈现׃(x)昑־一目了然。好了,我们来分析一下这张图如何用twaver实现它?/h4>

首先我们要定义部门的|元Qtwaver矢量减少了我们很多定制UI的繁琐,我们直接用矢量来描述q个圆炚w分,注意圆点的颜色需要区分鼠标滑q时的效果,q里我们定义了是否需要高亮的属性:(x)highlightedQ代码如下:(x)

 1 twaver.Util.registerImage('circle_node', {        
 2     w: 200,
 3     h: 200,
 4     lineWidth:1,
 5     lineColor: 'black',    
 6     v: [{
 7         shape: 'circle',        
 8         r: 6,
 9         fill: function(data, view){
10             if(data.getClient('highlighted')){
11                 return highlightedNodeColor;
12             }else{                
13                 return normalNodeColor;
14             }
15         }
16     }]
17 });

W一步,圆Ҏ(gu)q好了,接下来就需要ؓ(f)圆点加上文字的显C,文字如果按照默认的显C方式显然不太好Q因为我们是要让文字q行旋{Q而文字所处的位置需要根据角度来计算对其方式和偏Ud|当然文字也需要鼠标滑q的效果Q?/h3>
 1 [code]
 2 {
 3     shape: 'text',
 4     text: '<%=getClient("text")%>',
 5     textAlign: function(data, view){
 6         var angle=data.getClient('angle'    )+ball.angle;
 7         angle=angle%360;
 8         if(angle<0){
 9             angle=angle+360;
10         }
11         if(angle>90 && angle<270){
12             return 'right';
13         }
14         return 'left';
15     },
16     textBaseline: 'middle',
17     font: '12px "Microsoft Yahei"',
18     fill: function(data, view){
19         if(data.getClient('highlighted')){
20             return highlightedNodeColor;
21         }else{                
22             return 'black';
23         }
24     },
25     x: function(data, view){
26         var angle=data.getClient('angle'    )+ball.angle;
27         angle=angle%360;
28         if(angle<0){
29             angle=angle+360;
30         }
31         if(angle>90 && angle<270){
32             return -10
33         }
34         return 10;
35     },            
36 }

好了Q第三步需要让整个节点能旋转v来,因此我们q需要ؓ(f)node加上旋{的矢量描qͼ(x)

 1 rotate: function(data, view){
 2     var angle=data.getClient('angle')+ball.angle;
 3     angle=angle%360;
 4     if(angle<0){
 5         angle=angle+360;
 6     }
 7     if(angle>90 && angle<270){
 8         angle+=180;
 9     }
10     return angle;
11 }

x部门的节点就定制好了Q是不是感觉复杂了一下,没关p,如果惌q样的功能,直接使用我们装好的q个可以了? 接着我们q需要来定制q线Q上图中q线走向的那U方式在twaver产品中已l是很常见了Q这里我们就不多描述了? OKQ准备好节点和连U的矢量描述之后可以来填充数据了,创徏好公司的所有部门以?qing)员工之间的关系后,我们q需要给部门讄上旋转的度数Q?/h3>
1 for(var i=0;i<size;i++){
2     var angle=Math.PI*2/size*i;
3     var x=ball.cx+ball.width*Math.cos(angle);
4     var y=ball.cy+ball.height*Math.sin(angle);
5     var id='n'+i;
6     var degree=parseInt(angle/Math.PI*180);
7     var node=createNode(box, id, x, y, '部门'+i, degree);
8 }

q样我们上面的那张图的功能就差不多了。也许有Z(x)觉得怎么都是呈现的是部门Q如何才能看到部门下哪些员工和另外的部门有关pd。是的,到此我们q只完成了一半,q有更精彩的内容呈现l大家?/h3>

双击部门后,可以展开q个部门Qƈ昄部门下所有的员工?/h3>

是不是很帅,注意q里是有动画效果的,双击某个部门Q这个部门会(x)转到剙Q然后展开q个部门。这个用twaver新增的动d能很Ҏ(gu)来实玎ͼq里׃多说了。下面录制了一个视频供大家ƣ赏。这h们就能更清楚的知道这个部门下的员工和哪个部门下的员工有业务往来关pM。下图是一个gif囄Q下载有Ҏ(gu)Q请耐心{待?


chord

或者直接点ȝ视频Q?/size;i++){>



惌demo的小伙伴们,l我们发邮g吧,我们?x)将完整代码呈现l?zhn)?


TWaver 2015-05-22 17:06 发表评论
]]> վ֩ģ壺 ޹պһ| | ŷŮƵ| ޱٸ뼤| ëƬ18ŮëƬƵδ | վۿƵ| ߹ۿ| þùѸ| ޾Ʒ˾þ| 99ƷƵ| ޳aƬ߹ۿ| 99ƵѹۿƵ| Դ°߹ۿ| Ƭ߹ۿ| ŷպۺϾþþþ| ݹѾþþ| ޹avŪŵ˸| ҹϼӰԺ| Ůվ| ޳ӰԺ߹ۿ| ƷһëƬƵۿ| С˵ͼƬഺɫ| ѾƷþ| ޹Ʒ˾Ʒ| þþƷ˽ӰԺѿ| þþƷa޹v岻 | ޼ɫС˵| һѹۿߵӰ | ޾Ʒ˾þþ| þþþùɫAVѹۿ| þþƷav鶹| 91㽶߹ۿȫ| ¶ѿ| ѿ20| ƷһƵ| Ļһ| VAһ | þһѲ| ˿Ƶ| ҳƵ߹ۿ| ձŷɫƵ߲|