TWaver - 專注UI技術(shù)

客戶的需求就是我們進(jìn)步的動(dòng)力。
最近有客戶提出大數(shù)據(jù)量Topo圖的自動(dòng)布局問題，在Topo中除了Node、Link，還包括Group、Subnetwork等容器組件。在這樣的情況下，我們拋開布局算法不談，主要分析如何提高布局的性能，如何讓TWaver能夠支持更強(qiáng)大的數(shù)據(jù)量，讓整體的布局效果更人性化。
首先我們應(yīng)該去發(fā)現(xiàn)問題的根源，當(dāng)TWaver支持大數(shù)據(jù)量時(shí)候，布局效果不佳，那么我們PC都在做什么呢，“它的時(shí)間都去哪了呢”？
不難發(fā)現(xiàn)，當(dāng)我們創(chuàng)建N個(gè)節(jié)點(diǎn)的時(shí)候，TWaver會(huì)不斷的刷新和繪制這些節(jié)點(diǎn)，其中最耗時(shí)間的莫過于DrawImage，因?yàn)槊總€(gè)節(jié)點(diǎn)Default情況下都有個(gè)默認(rèn)的Image(當(dāng)然vector情況下例外)。可見，我們PC的時(shí)間都花在DrawIamge上面了，從而影響了整體的性能。
那么如何解決這個(gè)問題呢？
其實(shí)也很簡單，大數(shù)據(jù)量的布局，overView情況下，我們很難看清晰每個(gè)節(jié)點(diǎn)，那么既然看不清的節(jié)點(diǎn)我們?yōu)槭裁催€花費(fèi)大量的時(shí)間去認(rèn)真的繪制它呢？想想是這樣吧，只要當(dāng)zoom值小于某個(gè)threshold,我們就用vector的圖形（Rect或者Cicle）代替節(jié)點(diǎn)，既提高了性能，而且也提高了視覺享受。來看看這樣布局的效果。
                                                                     圖1 所有的Group都合并                                                                      圖2 所有的Group均展開                                                                       圖3 不斷放大（zoom<threshold）

                                                                      圖4 熟悉的面孔出現(xiàn)了（zoom>=threshold）
算法的改進(jìn)還有很多，比如我們也可以在zoom值很小的時(shí)候放棄繪制attachment等等。
經(jīng)過不斷測試，這樣的方法的確使得布局效果有一定的改善，當(dāng)然更大的改善還需要布局位置的計(jì)算算法和顯示的算法相結(jié)合，這樣才能達(dá)到更佳的效果。