TWaver - 專注UI技術(shù)

          http://twaver.servasoft.com/
          posts - 171, comments - 191, trackbacks - 0, articles - 2
            BlogJava :: 首頁 :: 新隨筆 :: 聯(lián)系 :: 聚合  :: 管理

          日歷

          <2012年3月>
          26272829123
          45678910
          11121314151617
          18192021222324
          25262728293031
          1234567

          新聞檔案(1)

          相冊(cè)

          搜索

          •  

          最新評(píng)論

          TWaver作為一款專業(yè)的圖形界面控件,可以應(yīng)用在各行各業(yè)中。本文我們就來詳細(xì)介紹一下TWaver如何繪制出電力系統(tǒng)的界面。我們現(xiàn)在看看幾張電力系統(tǒng)的圖:

          某變電站設(shè)備接線圖一

           
          某變電所的接線圖二
          當(dāng)然這些是我在網(wǎng)上搜索的一些資源,那么TWaver是否能實(shí)現(xiàn)這樣的界面呢?回答是肯定的,我們先來分析一下,電力電氣系統(tǒng)中這些界面都是由很多電氣元素組成的,比如變壓器,刀閘,開關(guān),接地開關(guān),電容器,發(fā)電機(jī)等。
          接下來我們看看如何去擴(kuò)展這些電氣元素,先整個(gè)簡(jiǎn)單的刀閘,刀閘一般有兩種狀態(tài),打開關(guān)閉,因此我們可以定義一個(gè)刀閘的類,繼承于ResizableNode,添加turnOn的屬性來控制開關(guān)狀態(tài)

           1 public class Switch extends ResizableNode{
           2     private boolean turnOn = true;
           3 
           4     public Switch() {
           5         super();
           6         init();
           7     }
           8 
           9     public Switch(Object id){
          10         super(id);
          11         init();
          12     }
          13 
          14     private void init(){
          15         this.setSize(5,30);
          16         this.putBorderColor(Color.black);
          17         this.putBorderInsets(12);
          18     }
          19 
          20      public String getUIClassID() {
          21         return SwitchUI.class.getName();
          22     }
          23 
          24      public boolean isTurnOn() {
          25         return turnOn;
          26     }
          27 
          28      public void setTurnOn(boolean turnOn) {
          29         if(this.turnOn != turnOn){
          30             boolean oldValue = this.turnOn;
          31             this.turnOn = turnOn;
          32             this.firePropertyChange("turnOn", oldValue, this.turnOn);
          33         }
          34     }
          35 }
          36 

          接著需要在UI上需要根據(jù)turnOn的屬性來繪制開關(guān)的形狀,下面貼一下主要的paint方法
           1 public void paintBody(Graphics2D g) {
           2     g.setStroke(TWaverConst.DOUBLE_WIDTH_STROKE);
           3 
           4     Switch switzh = (Switch)this.getElement();
           5 
           6     //get position
           7     final Point location = switzh.getLocation();
           8     final Dimension size = switzh.getSize();
           9     boolean trunOn = switzh.isTurnOn();
          10     final int x = location.x;
          11     final int y = location.y;
          12     final int width = size.width;
          13     final int height = size.height;
          14 
          15     //draw color frame
          16     g.setColor(new Color(170,0,225));
          17     g.drawOval(x, y, width, width);
          18     g.drawOval(x, y+height-width, width, width);
          19 
          20     if(trunOn){
          21         g.drawLine(x+width/2, y+height-width, x+height/2,y+width);
          22     }else{
          23         g.drawLine(x+width/2, y+height-width, x+width/2, y+width);
          24     }
          25 }
          26 
          通過一個(gè)main來運(yùn)行看看擴(kuò)展出來的效果:

          這是簡(jiǎn)單的刀閘元素,擴(kuò)展起來還是比較容易的。接下來來個(gè)稍微復(fù)雜一點(diǎn)的--接地開關(guān),同樣它和刀閘一樣,也有兩種狀態(tài)



          這個(gè)例子中我們給接地開關(guān)設(shè)置了幾個(gè)不同的方向,同樣上面的也可以這么做一下處理,我們來看看如何繪制這個(gè)接地開關(guān)的
           1 public void paintBody(Graphics2D g) {
           2     g.setStroke(TWaverConst.BASIC_STROKE);
           3     g.setColor(Color.black)
           4 
           5     EarthingSwitch earthingSwitch = (EarthingSwitch)this.getElement();
           6     final Point location = earthingSwitch.getLocation();
           7 
           8     boolean turnOn = earthingSwitch.isTurnOn();
           9     int position = earthingSwitch.getSwitchPosition();
          10     final int x = location.x;
          11     final int y = location.y;
          12     int width = earthingSwitch.getWidth();
          13     int height = earthingSwitch.getHeight();
          14     //draw body
          15     if(turnOn){
          16         if(position == Utils.SWITCH_POSITION_TOP){
          17             g.drawLine(x+width/4, y, x+width/4*3, y);
          18             g.drawLine(x+width/6, y+2, x+width/6*5, y+2);
          19             g.drawLine(x, y+4, x+width, y+4);
          20             g.drawLine(x+width/2, y+4, x+width/2, y+7);
          21             g.drawLine(x+width/2, y+7, x+width, y+height-10);
          22             g.drawLine(x+width/2, y+height-3, x+width/2, y+height);
          23         }else if(position == Utils.SWITCH_POSITION_LEFT){
          24             //transfer width and height
          25             int middle = width;
          26             width = height;
          27             height = middle;
          28 
          29             g.drawLine(x,y+height/4, x, y+height/4*3);
          30             g.drawLine(x+2, y+height/6, x+2, y+height/6*5);
          31             g.drawLine(x+4, y, x+4, y+height);
          32             g.drawLine(x+4, y+height/2, x+7, y+height/2);
          33             g.drawLine(x+7, y+height/2, x+width-10, y);
          34             g.drawLine(x+width-3, y+height/2, x+width, y+height/2);
          35         }else if(position == Utils.SWITCH_POSITION_BOTTOM){
          36             g.drawLine(x+width/4, y+height, x+width/4*3, y+height);
          37             g.drawLine(x+width/6, y+height-2, x+width/6*5, y+height-2);
          38             g.drawLine(x, y+height-4, x+width, y+height-4);
          39             g.drawLine(x+width/2, y+height-4, x+width/2, y+height-7);
          40             g.drawLine(x+width/2, y+height-7, x, y+10);
          41             g.drawLine(x+width/2, y+3, x+width/2, y);
          42         }else if(position == Utils.SWITCH_POSITION_RIGHT){
          43             //transfer width and height
          44             int middle = width;
          45             width = height;
          46             height = middle;
          47 
          48             g.drawLine(x+width,y+height/4, x+width, y+height/4*3);
          49             g.drawLine(x+width-2, y+height/6, x+width-2, y+height/6*5);
          50             g.drawLine(x+width-4, y, x+width-4, y+height);
          51             g.drawLine(x+width-4, y+height/2, x+width-7, y+height/2);
          52             g.drawLine(x+width-7, y+height/2, x+10, y);
          53             g.drawLine(x+3, y+height/2, x, y+height/2);
          54         }
          55     }else{
          56         if(position == Utils.SWITCH_POSITION_TOP){
          57             g.drawLine(x+width/4, y, x+width/4*3, y);
          58             g.drawLine(x+width/6, y+2, x+width/6*5, y+2);
          59             g.drawLine(x, y+4, x+width, y+4);
          60             g.drawLine(x+width/2, y+4, x+width/2, y+7);
          61             g.drawLine(x+width/2, y+7, x+width/2, y+height-3);
          62             g.drawLine(x+width/2, y+height-3, x+width/2, y+height);
          63         }else if(position == Utils.SWITCH_POSITION_LEFT){
          64             //transfer width and height
          65             int middle = width;
          66             width = height;
          67             height = middle;
          68 
          69             g.drawLine(x,y+height/4, x, y+height/4*3);
          70             g.drawLine(x+2, y+height/6, x+2, y+height/6*5);
          71             g.drawLine(x+4, y, x+4, y+height);
          72             g.drawLine(x+4, y+height/2, x+7, y+height/2);
          73             g.drawLine(x+7, y+height/2, x+width-3, y+height/2);
          74             g.drawLine(x+width-3, y+height/2, x+width, y+height/2);
          75         }else if(position == Utils.SWITCH_POSITION_BOTTOM){
          76             g.drawLine(x+width/4, y+height, x+width/4*3, y+height);
          77             g.drawLine(x+width/6, y+height-2, x+width/6*5, y+height-2);
          78             g.drawLine(x, y+height-4, x+width, y+height-4);
          79             g.drawLine(x+width/2, y+height-4, x+width/2, y+height-7);
          80             g.drawLine(x+width/2, y+height-7, x+width/2, y+3);
          81             g.drawLine(x+width/2, y+3, x+width/2, y);
          82         }else if(position == Utils.SWITCH_POSITION_RIGHT){
          83             //transfer width and height
          84             int middle = width;
          85             width = height;
          86             height = middle;
          87 
          88             g.drawLine(x+width,y+height/4, x+width, y+height/4*3);
          89             g.drawLine(x+width-2, y+height/6, x+width-2, y+height/6*5);
          90             g.drawLine(x+width-4, y, x+width-4, y+height);
          91             g.drawLine(x+width-4, y+height/2, x+width-7, y+height/2);
          92             g.drawLine(x+width-7, y+height/2, x+3, y+height/2);
          93             g.drawLine(x+3, y+height/2, x, y+height/2);
          94         }
          95     }
          96 }
          97 

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

          有了這些基礎(chǔ)的元素,那么來繪制電力系統(tǒng)界面就顯得不是那么復(fù)雜了,我們通過上面擴(kuò)展的這些電力元素用twaver的工具畫出了一個(gè)電力系統(tǒng)圖,如下:


          最后我們可以在界面上加上交互,比如雙擊打開關(guān)閉刀閘開關(guān),然后添加自己的業(yè)務(wù),這樣一個(gè)簡(jiǎn)單的電力系統(tǒng)界面就完成了
           1 network.addElementDoubleClickedActionListener(new ActionListener(){
           2     public void actionPerformed(ActionEvent e) {
           3         Element ele = network.getSelectionModel().lastElement();
           4         if(ele instanceof Switch){
           5             boolean turnOn = ((Switch)ele).isTurnOn();
           6             ((Switch)ele).setTurnOn(!turnOn);
           7         }
           8     }
           9 });
          10 

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





          只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。


          網(wǎng)站導(dǎo)航:
           
          主站蜘蛛池模板: 宁城县| 青河县| 涡阳县| 曲水县| 波密县| 扶余县| 图木舒克市| 文山县| 响水县| 个旧市| 徐水县| 济宁市| 广南县| 周至县| 湟源县| 区。| 宝应县| 扶余县| 门头沟区| 大名县| 吉隆县| 达州市| 光山县| 安图县| 广平县| 江安县| 大洼县| 库尔勒市| 丹凤县| 南陵县| 民勤县| 汽车| 和平县| 南皮县| 上蔡县| 彭州市| 和龙市| 盖州市| 松溪县| 宜城市| 化州市|