如何用Swing去繪制電力系統圖

TWaver作為一款專業的圖形界面控件，可以應用在各行各業中。本文我們就來詳細介紹一下TWaver如何繪制出電力系統的界面。我們現在看看幾張電力系統的圖： 

某變電站設備接線圖一

某變電所的接線圖二

當然這些是我在網上搜索的一些資源，那么TWaver是否能實現這樣的界面呢？回答是肯定的，我們先來分析一下，電力電氣系統中這些界面都是由很多電氣元素組成的，比如變壓器，刀閘，開關，接地開關，電容器，發電機等。 接下來我們看看如何去擴展這些電氣元素，先整個簡單的刀閘，刀閘一般有兩種狀態，打開關閉，因此我們可以定義一個刀閘的類，繼承於ResizableNode,添加turnOn的屬性來控制開關狀態

public class Switch extends ResizableNode{
	private boolean turnOn = true;

	public Switch() {
		super();
		init();
	}

	public Switch(Object id){
		super(id);
		init();
	}

	private void init(){
		this.setSize(5,30);
		this.putBorderColor(Color.black);
		this.putBorderInsets(12);
	}

	 public String getUIClassID() {
        return SwitchUI.class.getName();
    }

	 public boolean isTurnOn() {
		return turnOn;
	}

	 public void setTurnOn(boolean turnOn) {
		if(this.turnOn != turnOn){
			boolean oldValue = this.turnOn;
			this.turnOn = turnOn;
			this.firePropertyChange("turnOn", oldValue, this.turnOn);
		}
	}
}

接着需要在UI上需要根據turnOn的屬性來繪制開關的形狀，下面貼一下主要的paint方法

public void paintBody(Graphics2D g) {
	g.setStroke(TWaverConst.DOUBLE_WIDTH_STROKE);

	Switch switzh = (Switch)this.getElement();

	//get position
	final Point location = switzh.getLocation();
	final Dimension size = switzh.getSize();
	boolean trunOn = switzh.isTurnOn();
	final int x = location.x;
	final int y = location.y;
	final int width = size.width;
	final int height = size.height;

	//draw color frame
	g.setColor(new Color(170,0,225));
	g.drawOval(x, y, width, width);
	g.drawOval(x, y+height-width, width, width);

	if(trunOn){
		g.drawLine(x+width/2, y+height-width, x+height/2,y+width);
	}else{
		g.drawLine(x+width/2, y+height-width, x+width/2, y+width);
	}
}

通過一個main來運行看看擴展出來的效果：

這是簡單的刀閘元素，擴展起來還是比較容易的。接下來來個稍微復雜一點的--接地開關，同樣它和刀閘一樣，也有兩種狀態 

這個例子中我們給接地開關設置了幾個不同的方向，同樣上面的也可以這么做一下處理，我們來看看如何繪制這個接地開關的

public void paintBody(Graphics2D g) {
	g.setStroke(TWaverConst.BASIC_STROKE);
	g.setColor(Color.black)

	EarthingSwitch earthingSwitch = (EarthingSwitch)this.getElement();
	final Point location = earthingSwitch.getLocation();

	boolean turnOn = earthingSwitch.isTurnOn();
	int position = earthingSwitch.getSwitchPosition();
	final int x = location.x;
	final int y = location.y;
	int width = earthingSwitch.getWidth();
	int height = earthingSwitch.getHeight();
	//draw body
	if(turnOn){
		if(position == Utils.SWITCH_POSITION_TOP){
			g.drawLine(x+width/4, y, x+width/4*3, y);
			g.drawLine(x+width/6, y+2, x+width/6*5, y+2);
			g.drawLine(x, y+4, x+width, y+4);
			g.drawLine(x+width/2, y+4, x+width/2, y+7);
			g.drawLine(x+width/2, y+7, x+width, y+height-10);
			g.drawLine(x+width/2, y+height-3, x+width/2, y+height);
		}else if(position == Utils.SWITCH_POSITION_LEFT){
			//transfer width and height
			int middle = width;
			width = height;
			height = middle;

			g.drawLine(x,y+height/4, x, y+height/4*3);
			g.drawLine(x+2, y+height/6, x+2, y+height/6*5);
			g.drawLine(x+4, y, x+4, y+height);
			g.drawLine(x+4, y+height/2, x+7, y+height/2);
			g.drawLine(x+7, y+height/2, x+width-10, y);
			g.drawLine(x+width-3, y+height/2, x+width, y+height/2);
		}else if(position == Utils.SWITCH_POSITION_BOTTOM){
			g.drawLine(x+width/4, y+height, x+width/4*3, y+height);
			g.drawLine(x+width/6, y+height-2, x+width/6*5, y+height-2);
			g.drawLine(x, y+height-4, x+width, y+height-4);
			g.drawLine(x+width/2, y+height-4, x+width/2, y+height-7);
			g.drawLine(x+width/2, y+height-7, x, y+10);
			g.drawLine(x+width/2, y+3, x+width/2, y);
		}else if(position == Utils.SWITCH_POSITION_RIGHT){
			//transfer width and height
			int middle = width;
			width = height;
			height = middle;

			g.drawLine(x+width,y+height/4, x+width, y+height/4*3);
			g.drawLine(x+width-2, y+height/6, x+width-2, y+height/6*5);
			g.drawLine(x+width-4, y, x+width-4, y+height);
			g.drawLine(x+width-4, y+height/2, x+width-7, y+height/2);
			g.drawLine(x+width-7, y+height/2, x+10, y);
			g.drawLine(x+3, y+height/2, x, y+height/2);
		}
	}else{
		if(position == Utils.SWITCH_POSITION_TOP){
			g.drawLine(x+width/4, y, x+width/4*3, y);
			g.drawLine(x+width/6, y+2, x+width/6*5, y+2);
			g.drawLine(x, y+4, x+width, y+4);
			g.drawLine(x+width/2, y+4, x+width/2, y+7);
			g.drawLine(x+width/2, y+7, x+width/2, y+height-3);
			g.drawLine(x+width/2, y+height-3, x+width/2, y+height);
		}else if(position == Utils.SWITCH_POSITION_LEFT){
			//transfer width and height
			int middle = width;
			width = height;
			height = middle;

			g.drawLine(x,y+height/4, x, y+height/4*3);
			g.drawLine(x+2, y+height/6, x+2, y+height/6*5);
			g.drawLine(x+4, y, x+4, y+height);
			g.drawLine(x+4, y+height/2, x+7, y+height/2);
			g.drawLine(x+7, y+height/2, x+width-3, y+height/2);
			g.drawLine(x+width-3, y+height/2, x+width, y+height/2);
		}else if(position == Utils.SWITCH_POSITION_BOTTOM){
			g.drawLine(x+width/4, y+height, x+width/4*3, y+height);
			g.drawLine(x+width/6, y+height-2, x+width/6*5, y+height-2);
			g.drawLine(x, y+height-4, x+width, y+height-4);
			g.drawLine(x+width/2, y+height-4, x+width/2, y+height-7);
			g.drawLine(x+width/2, y+height-7, x+width/2, y+3);
			g.drawLine(x+width/2, y+3, x+width/2, y);
		}else if(position == Utils.SWITCH_POSITION_RIGHT){
			//transfer width and height
			int middle = width;
			width = height;
			height = middle;

			g.drawLine(x+width,y+height/4, x+width, y+height/4*3);
			g.drawLine(x+width-2, y+height/6, x+width-2, y+height/6*5);
			g.drawLine(x+width-4, y, x+width-4, y+height);
			g.drawLine(x+width-4, y+height/2, x+width-7, y+height/2);
			g.drawLine(x+width-7, y+height/2, x+3, y+height/2);
			g.drawLine(x+3, y+height/2, x, y+height/2);
		}
	}
}

還有一些其他的元素，比如開關，發電機，變壓器這些可以直接通過TWaver提供的customDraw很容易的配置出來，這些就比較簡單了，此處代碼省略100字，直接上圖了 

有了這些基礎的元素，那么來繪制電力系統界面就顯得不是那么復雜了，我們通過上面擴展的這些電力元素用twaver的工具畫出了一個電力系統圖，如下：

最后我們可以在界面上加上交互，比如雙擊打開關閉刀閘開關，然后添加自己的業務，這樣一個簡單的電力系統界面就完成了

network.addElementDoubleClickedActionListener(new ActionListener(){
	public void actionPerformed(ActionEvent e) {
		Element ele = network.getSelectionModel().lastElement();
		if(ele instanceof Switch){
			boolean turnOn = ((Switch)ele).isTurnOn();
			((Switch)ele).setTurnOn(!turnOn);
		}
	}
});

同樣最先貼出來的兩張變電所的圖是不是也就很容易的做出來呢!最后再附上TWaver做的另一張電力界面圖