用Swing制作精美的图层叠加图

阅读更多

前段时间,看着不少人用twaver的Swing在写东西,比如我们武林中的Swing刀客  和 Swing剑客(注三号管家chart图的模仿),都用到了写出了很漂亮的swing界面。下面我要分享的是用swing编写的图层叠加效果图,其中也用到了twaver的一些功能。(在此仅仅是为了分享给大家比较美的界面,希望能在这酷暑之际为大家带来一丝凉意或美的享受就心满意足了)。

在TWaver的各个使用手册,文档或Demo中我们可以看到,twaver提供了Layer的概念,就是图层,这与一些制图软件也有几分相似。在实际应用中也是比较的多。比如TWaver的水印、背景效果都是通过图层来叠加的。

下面我们就来看看这个精美的图层叠加图到底美在何处,先上最终效果图:

用Swing制作精美的图层叠加图_第1张图片

 

 这是一个使用TWaver Java制作的自动布局的例子,有人能看得出这里使用了多少个图层合并而成的吗?
呵呵,我们先来看看整体的一个布局:首先frame中添加了一个LayeroutPanel,panel中放了一个network,network中间部分是用于存放网元,连线,右半部分是scrollPanel。

用Swing制作精美的图层叠加图_第2张图片

 

 

 

一.    Network的叠加

我们先来看看中间这个network的图层是如何叠加的
1.阴影层
首先是在network的Cushion上添加了一个网元阴影层,cushion在TWaver的定义中是处于所有图层之下的一层。

network.addCanvasCushion(new ShadowCushion(this));

 

用Swing制作精美的图层叠加图_第3张图片

 

阴影也可以这样添加。
2.网元层 

在默认图层上添加布局的网元 

 

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);

 

用Swing制作精美的图层叠加图_第4张图片 

 

 

TWaver提供了多种布局的效果,这是一个左树形布局,下面的toolbar上提供了更多的布局方式。
3.背景层 

设置network背景图片,背景层也是处于所有数据层之下的一层,但是在cushion层之上 

 

this.setImageBackground("/demo/layout/images/bottom.png");

 

用Swing制作精美的图层叠加图_第5张图片

 

 4.顶层 

添加top的图层节点,并设置图层为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);

 

用Swing制作精美的图层叠加图_第6张图片

 

使用一个Node最为最上层的图片,哈哈,这也是TWaver中的一个使用技巧。

5.工具条层 

添加toolbar图层并设置为1,这样toolbar的图层会在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);

 

 

工具条也是一张图片哦,哈哈,没想到吧! 

工具条的动画效果

从上面分解中可以看出,工具条是叠加在top层之上的,这其中还有一个动画的效果,当鼠标移动到工具条所有的区域范围时,才会出现,移出并会隐藏。 

 

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根据添加的这些图层顺序,就会在network上叠加出一个左半部分的效果,如下: 

 

用Swing制作精美的图层叠加图_第7张图片 

 

二.    ScrollPanel的叠加

看完network中间部分的叠加效果,我们再来看看这张图的右半部分scrollerPanel是如何叠加的

 

1. 组件层

这是最重要的放置内容面板的一层,里面放置了24个独立的组件。通过设置边框的范围让其只显示中间部分,每个独立的组件都可以单独操作:选中,移动,染色,tooltip…都可以呈现。

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);
	}

}

 

 

用Swing制作精美的图层叠加图_第8张图片

 

 

2.相框层

这是一个给每个组件设置相框的一个图层,首先我们需要相框图片

用Swing制作精美的图层叠加图_第9张图片

 

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);
    }
};

 用Swing制作精美的图层叠加图_第10张图片

 

蒙版层上也是有动画效果的,当鼠标点击上或下的蒙版,组件面板会自动上移或下移一个

4.最终叠加效果

用Swing制作精美的图层叠加图_第11张图片 

 

 

这样两张图片一叠加就可以得到我们最开始提供的那种图了。

 

 用Swing制作精美的图层叠加图_第12张图片

 

是不是有点像用PS软件在画图,呵呵,对了,这就是twaver swing中图层的作用。

 

 


PS:附上源Demo代码供大家学习分享:TopoDemo

  • 用Swing制作精美的图层叠加图_第13张图片
  • 大小: 352.2 KB
  • 用Swing制作精美的图层叠加图_第14张图片
  • 大小: 12.7 KB
  • 用Swing制作精美的图层叠加图_第15张图片
  • 大小: 34.5 KB
  • 用Swing制作精美的图层叠加图_第16张图片
  • 大小: 47.8 KB
  • 用Swing制作精美的图层叠加图_第17张图片
  • 大小: 3.7 KB
  • 用Swing制作精美的图层叠加图_第18张图片
  • 大小: 226.2 KB
  • 用Swing制作精美的图层叠加图_第19张图片
  • 大小: 6.2 KB
  • 用Swing制作精美的图层叠加图_第20张图片
  • 大小: 311.7 KB
  • 用Swing制作精美的图层叠加图_第21张图片
  • 大小: 50.3 KB
  • 用Swing制作精美的图层叠加图_第22张图片
  • 大小: 2.1 KB
  • 用Swing制作精美的图层叠加图_第23张图片
  • 大小: 108.1 KB
  • 用Swing制作精美的图层叠加图_第24张图片
  • 大小: 450.3 KB
  • 用Swing制作精美的图层叠加图_第25张图片
  • 大小: 485.8 KB
  • TopoDemo.zip (395.7 KB)
  • 下载次数: 68
  • 用Swing制作精美的图层叠加图_第26张图片
  • 大小: 407.5 KB
  • 查看图片附件

你可能感兴趣的:(Layer,swing,chart,动画,twaver)