用Swing制作精美的圖層疊加圖
前段時(shí)間，看著不少人用twaver的Swing在寫東西，比如我們武林中的Swing 刀客 和 Swing劍客（注三號(hào)管家chart圖的模仿），都用到了寫出了很漂亮的swing界面。下面我要分享的是用swing編寫的圖層疊加效果圖，其中也用到了twaver的一些功能。（在此僅僅是為了分享給大家比較美的界面，希望能在這酷暑之際為大家?guī)硪唤z涼意或美的享受就心滿意足了）。
在TWaver的各個(gè)使用手冊(cè)，文檔或Demo中我們可以看到，twaver提供了Layer的概念，就是圖層，這與一些制圖軟件也有幾分相似。在實(shí)際應(yīng)用中也是比較的多。比如TWaver的水印、背景效果都是通過圖層來疊加的。
下面我們就來看看這個(gè)精美的圖層疊加圖到底美在何處，先上最終效果圖：
這是一個(gè)使用TWaver Java制作的自動(dòng)布局的例子，有人能看得出這里使用了多少個(gè)圖層合并而成的嗎？
呵呵，我們先來看看整體的一個(gè)布局：首先frame中添加了一個(gè)LayeroutPanel，panel中放了一個(gè)network，network中間部分是用于存放網(wǎng)元，連線，右半部分是scrollPanel。
一、Network的疊加
我們先來看看中間這個(gè)network的圖層是如何疊加的
1.陰影層
首先是在network的Cushion上添加了一個(gè)網(wǎng)元陰影層，cushion在TWaver的定義中是處于所有圖層之下的一層。
- network.addCanvasCushion(new ShadowCushion(this));
陰影也可以這樣添加。
2.網(wǎng)元層
在默認(rèn)圖層上添加布局的網(wǎng)元
- this.cloud = this.createNode("/demo/layout/images/cloud.png");
- this.center1 = this.createNode("/demo/layout/images/center.png");
- this.center2 = this.createNode("/demo/layout/images/center.png");
- this.gather1 = this.createNode("/demo/layout/images/gather.png");
- this.gather2 = this.createNode("/demo/layout/images/gather.png");
- this.router1 = this.createNode("/demo/layout/images/router1.png", 0, "Router 1");
- this.router2 = this.createNode("/demo/layout/images/router2.png", 1, "Router 2");
- this.server1 = this.createNode("/demo/layout/images/pc.png", 2, "Spring Layout");
- this.server2 = this.createNode("/demo/layout/images/pc.png", 3, "Office Network");
- this.server3 = this.createNode("/demo/layout/images/pc.png", 4, "US Map");
- this.client1 = this.createNode("/demo/layout/images/pc.png", 5, "Bar Chart");
- this.client2 = this.createNode("/demo/layout/images/pc.png", 6, "Tag Cloud");
- this.client3 = this.createNode("/demo/layout/images/pc.png", 7, "Bus Layout");
- this.createLink(gather1, client1);
- this.createLink(gather1, client2);
- this.createLink(gather1, client3);
- this.createLink(gather2, server1);
- this.createLink(gather2, server2);
- this.createLink(gather2, server3);
- this.createLink(cloud, center1);
- this.createLink(cloud, center2);
- this.createLink(router1, center1);
- this.createLink(router2, center2);
- this.createLink(router1, gather1);
- this.createLink(router2, gather2);
TWaver提供了多種布局的效果，這是一個(gè)左樹形布局，下面的toolbar上提供了更多的布局方式。
3.背景層
設(shè)置network背景圖片，背景層也是處于所有數(shù)據(jù)層之下的一層，但是在cushion層之上
- this.setImageBackground("/demo/layout/images/bottom.png");
4.頂層
添加top的圖層節(jié)點(diǎn)，并設(shè)置圖層為1
- this.top = this.createNode("/demo/layout/images/top.png");
- this.top.setLayerID("top");
- Layer topLayer = new Layer("top");
- topLayer.setMovable(false);
- topLayer.setSelectable(false);
- this.getDataBox().getLayerModel().addLayer(1, topLayer);
使用一個(gè)Node最為最上層的圖片，哈哈，這也是TWaver中的一個(gè)使用技巧。
5.工具條層
添加toolbar圖層并設(shè)置為1，這樣toolbar的圖層會(huì)在top層之上
- this.toolbar = this.createNode("/demo/layout/images/toolbar.png");
- this.toolbar.setLocation(21, 68);
- this.toolbar.setLayerID("toolbar");
- Layer toolbarLayer = new Layer("toolbar");
- toolbarLayer.setMovable(false);
- toolbarLayer.setSelectable(false);
- this.getDataBox().getLayerModel().addLayer(1, toolbarLayer);
工具條也是一張圖片哦，哈哈，沒想到吧！
工具條的動(dòng)畫效果
從上面分解中可以看出，工具條是疊加在top層之上的，這其中還有一個(gè)動(dòng)畫的效果，當(dāng)鼠標(biāo)移動(dòng)到工具條所有的區(qū)域范圍時(shí)，才會(huì)出現(xiàn)，移出并會(huì)隱藏。
- this.getCanvas().addMouseMotionListener(new MouseMotionAdapter() {
- public void mouseMoved(MouseEvent e) {
- if(isAdjustingToolbar){
- return;
- }
- if(toolbarBounds.contains(e.getPoint())){
- if(!toolbar.isVisible()){
- isAdjustingToolbar = true;
- toolbar.setVisible(true);
- TWaverUtil.animateMove(toolbar, toolbar.getWidth(), 0, new Runnable(){
- public void run() {
- isAdjustingToolbar = false;
- }
- });
- }
- }else{
- if(toolbar.isVisible()){
- isAdjustingToolbar = true;
- TWaverUtil.animateMove(toolbar, -toolbar.getWidth(), 0, new Runnable(){
- public void run() {
- toolbar.setVisible(false);
- isAdjustingToolbar = false;
- }
- });
- }
- }
- }
- });
6.最終合并效果最后twaver根據(jù)添加的這些圖層順序，就會(huì)在network上疊加出一個(gè)左半部分的效果，如下:
二. ScrollPanel的疊加
看完network中間部分的疊加效果，我們?cè)賮砜纯催@張圖的右半部分scrollerPanel是如何疊加的
1. 組件層
這是最重要的放置內(nèi)容面板的一層，里面放置了24個(gè)獨(dú)立的組件。通過設(shè)置邊框的范圍讓其只顯示中間部分，每個(gè)獨(dú)立的組件都可以單獨(dú)操作：選中，移動(dòng)，染色，tooltip…都可以呈現(xiàn)。
- for(int i=0; i<24; i++){
- JComponent component = null;
- int index = i % 8;
- if(index == 0){
- component = new Router1();
- }
- ... ...
- if(component != null){
- component.setPreferredSize(CARDSIZE);
- component.setMaximumSize(CARDSIZE);
- component.setMinimumSize(CARDSIZE);
- component.setBounds(XGAP, i*CARDSIZE.height+YGAP, CARDSIZE.width-XGAP*2, CARDSIZE.height-YGAP*2);
- this.add(component);
- }
- }
2.相框?qū)?/p>
這是一個(gè)給每個(gè)組件設(shè)置相框的一個(gè)圖層，首先我們需要相框圖片
- Rectangle rect = new Rectangle(0, i*CARDSIZE.height, CARDSIZE.width, CARDSIZE.height);
- if(i != (this.currentIndex + 8)){
- g2.drawImage(CARDIMAGE, rect.x, rect.y, rect.width, rect.height, null);
- }else{
- rect.grow(-XGAP+4, -YGAP+4);
- g2.setColor(Color.white);
- g2.setStroke(TWaverConst.BASIC_STROKE);
- int d = 8;
- g2.drawLine(rect.x, rect.y, rect.x+d*2, rect.y);
- g2.drawLine(rect.x, rect.y, rect.x, rect.y+d);
- g2.drawLine(rect.x+rect.width, rect.y+rect.height, rect.x+rect.width-d*2, rect.y+rect.height);
- g2.drawLine(rect.x+rect.width, rect.y+rect.height, rect.x+rect.width, rect.y+rect.height-d);
- }
3.蒙版層
這是最上邊的類似于蒙版的一層，通過兩張上下透明的圖片將其放置在scrollerPane的最上邊一層
- if(top){
- image = TWaverUtil.getImageIcon("/demo/layout/images/mist1.png");
- }else{
- image = TWaverUtil.getImageIcon("/demo/layout/images/mist2.png");
- }
- JComponent canvas = new JComponent(){
- public void paintComponent(Graphics g) {
- super.paintComponent(g);
- g.drawImage(image.getImage(), 0, 0, image.getIconWidth(), image.getIconHeight(), null);
- }
- };
蒙版層上也是有動(dòng)畫效果的，當(dāng)鼠標(biāo)點(diǎn)擊上或下的蒙版，組件面板會(huì)自動(dòng)上移或下移一個(gè)
4.最終疊加效果
這樣兩張圖片一疊加就可以得到我們最開始提供的那種圖了。
是不是有點(diǎn)像用PS軟件在畫圖，呵呵，對(duì)了，這就是twaver swing中圖層的作用。
PS：附上源Demo代碼供大家學(xué)習(xí)分享：TopoDemo
原文鏈接：http://www.cnblogs.com/twaver/archive/2011/07/29/2120877.html
分享到微信 
分享到微博
