Posted on 2011-09-16 15:45
TWaver 閱讀(2595)
評(píng)論(2) 編輯 收藏
TWaver的連線默認(rèn)支持流動(dòng)效果，設(shè)置連線的流動(dòng)屬性為true，以及流動(dòng)顏色，方向，寬度等，就可以出現(xiàn)下面間隔顏色的流動(dòng)效果。
默認(rèn)連線流動(dòng)效果
link流動(dòng)設(shè)置代碼：
1
Link flowingLink = new Link(node, node);
2flowingLink.putLinkFlowing(true);
3flowingLink.putLinkFlowingColor(Color.BLUE);
4flowingLink.putLinkFlowingWidth(5);
5flowingLink.putLinkWidth(5);
6flowingLink.putLinkAntialias(true);
默認(rèn)連線流動(dòng)效果：
定制連線流動(dòng)效果
默認(rèn)的效果總是滿(mǎn)足不了客戶(hù)豐富的實(shí)際需求，最近就遇到有客戶(hù)提這樣的需求，link上方出現(xiàn)一排流動(dòng)的點(diǎn)表示信息流，點(diǎn)之間的間隙代表流動(dòng)的速度，如下示意圖：
分析難點(diǎn)，與默認(rèn)流動(dòng)效果相比有三處區(qū)別：一是流動(dòng)的圖形是點(diǎn)，而不是色塊，二是間距要可設(shè)置，三是繪制位置在link上方，而不是和link疊在一起。遇到問(wèn)題解決問(wèn)題，程序員的神奇之處就是簡(jiǎn)單的幾行代碼，就能讓不懂代碼的mm對(duì)你佩服不已，這個(gè)問(wèn)題的解決也是如此，通過(guò)對(duì)stroke的設(shè)置和sin,cos的使用輕松化解了問(wèn)題難點(diǎn)。
定義CustomFlowingLink和CustomFlowingLinkUI類(lèi)
首先這個(gè)問(wèn)題是需要擴(kuò)展LinkUI的，按照定制ElementUI的方法，擴(kuò)展一個(gè)CustomFlowingLink類(lèi)，以及對(duì)應(yīng)的ui類(lèi)CustomFlowingLinkUI，如下：
1
public static class CustomFlowingLink extends Link
{
2
public CustomFlowingLink(){
3
super();
4 this.init();
5
}
6
7 public CustomFlowingLink(Object id){
8 super(id);
9 this.init();
10 }
11
12 public CustomFlowingLink(Node node1, Node node2) {
13 super(node1, node2);
14 this.init();
15 }
16
17 private void init(){
18 this.putLinkFlowing(true);
19 this.putLinkFlowingColor(Color.RED);
20 this.putLinkAntialias(true);
21 }
22
23 @Override
24 public String getUIClassID() {
25 return CustomFlowingLinkUI.class.getName();
26 }
27
}
28
29public static class CustomFlowingLinkUI extends LinkUI{
30 CustomFlowingLink link;
31 public CustomFlowingLinkUI(TNetwork network, CustomFlowingLink link) {
32 super(network, link);
33 this.link = link;
34 }
35}
上面的代碼通過(guò)重寫(xiě)Link#public String getUIClassID()方法，使CustomFlowingLink與CustomFlowingLinkUI關(guān)聯(lián)，其中CustomFlowingLink構(gòu)造寒函數(shù)中設(shè)置了該連線為流動(dòng)樣式，并設(shè)置了流動(dòng)顏色。注意上面構(gòu)造函數(shù)的重寫(xiě)，例如CustomFlowingLink必須實(shí)現(xiàn)不帶參數(shù)的默認(rèn)構(gòu)造函數(shù)，以及帶id參數(shù)的構(gòu)造函數(shù)，這樣擴(kuò)展的連線類(lèi)型才能夠同TDataBox導(dǎo)出導(dǎo)入xml。
增加控制點(diǎn)間距和偏離距離的屬性
接下來(lái)我們?cè)黾觾蓚€(gè)屬性，flowingGap，flowingOffset分別用來(lái)控制點(diǎn)間距和偏離連線的距離，如下：
1public static class CustomFlowingLink extends Link{
2 int flowingGap = 10;
3 int flowingOffset = 10;
4
5 public int getFlowingGap() {
6 return flowingGap;
7 }
8
9 public void setFlowingGap(int flowingGap) {
10 this.flowingGap = flowingGap;
11 this.updateUI();
12 }
13
14 public int getFlowingOffset() {
15 return flowingOffset;
16 }
17
18 public void setFlowingOffset(int flowingOffset) {
19 this.flowingOffset = flowingOffset;
20 this.updateUI();
21 }
22
23 }
定制流動(dòng)繪制邏輯
下面定制繪制邏輯，這里重寫(xiě)了LinkUI的public void paintBody(Graphics2D g2d)方法，另外在連線的上方繪制了一條點(diǎn)線
重點(diǎn)是stroke的設(shè)置，這里我們?cè)敿?xì)來(lái)解釋一下參數(shù)：
1public void paintBody(Graphics2D g2d) {
2 super.paintBody(g2d);
3 if(this.isFlowing()){
4 g2d.setColor(this.getFlowingColor());//流動(dòng)線顏色
5 float[] dashPatten = new float[] {0, link.getFlowingGap()};
6 Stroke dashStroke = new BasicStroke(
7 this.getFlowingWidth(),//畫(huà)筆參數(shù)，如果你需要更改點(diǎn)的大小，可以修改這個(gè)參數(shù)
8 BasicStroke.CAP_ROUND,//線端點(diǎn)樣式為圓角，這樣一個(gè)點(diǎn)就會(huì)繪制成一個(gè)圓形
9 BasicStroke.JOIN_ROUND,//線連接點(diǎn)樣式
10 link.getFlowingGap(),//最小測(cè)量單位，這里取點(diǎn)間距
11 dashPatten,//線樣式，{0, link.getFlowingGap()}就表示每間隔link.getFlowingGap()個(gè)像素繪制一個(gè)點(diǎn)
12 this.getDashPhase());//起始位置，TWaver內(nèi)部會(huì)定時(shí)的修改這個(gè)值，使這條線流動(dòng)起來(lái)
13 g2d.setStroke(dashStroke);
14 double offset = link.getFlowingOffset();
15 double tx = Math.sin(this.linkAngle) * offset;
16 double ty = -Math.cos(this.linkAngle) * offset;
17 System.out.println(tx + " , " + ty);
18 g2d.translate(tx, ty);
19 g2d.draw(this.getPath());
20 g2d.translate(-tx, -ty);
21 }
22} 最終效果
創(chuàng)建兩條連線，看看效果：
1public static void main(String[] args) {
2 TDataBox box = new TDataBox();
3
4 Node node1 = createNode(box, null, 100, 100);
5 Node node2 = createNode(box, null, 200, 120);
6 Node node3 = createNode(box, null, 100, 200);
7 Node node4 = createNode(box, null, 200, 220);
8
9 CustomFlowingLink link1 = new CustomFlowingLink(node1, node2);
10 CustomFlowingLink link2 = new CustomFlowingLink(node3, node4);
11 link2.setFlowingGap(20);
12 link2.setFlowingOffset(15);
13
14 box.addElement(link1);
15 box.addElement(link2);
16
17 showFrame("Custom Flowing Link Demo", new TNetwork(box));
18}
效果圖：
完整代碼請(qǐng)查看這里