FLEX皮膚_自定義圓形和方形節(jié)點

sinkingboat

1.概述
      節(jié)點效果如下，可以用于Petri網(wǎng)的節(jié)點表示等。


2.開發(fā)過程
2.1創(chuàng)建一個節(jié)點類
      節(jié)點類必須繼承SkinnableComponent，這樣才能設(shè)置皮膚
代碼如下

1. package nodeexam
   
2. {
   
3.     import spark.components.supportClasses.SkinnableComponent;
   
4.     public class Node extends SkinnableComponent {
   
5.         public function Node() {
   
6.             super();
   
7.         }
   
8.     }
   
9. }

2.2 定義Skin類
      這里定義了兩個皮膚，代碼如下
PlaceSkin.mxml

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
   
3.         xmlns:s="library://ns.adobe.com/flex/spark"
   
4.         xmlns:mx="library://ns.adobe.com/flex/mx"
   
5.         width="400" height="300">
   
6.     <s:Ellipse id="ellipse" top="0" right="0" bottom="0" left="0">
   
7.         <s:fill>
   
8.             <s:SolidColor color="0x77CC22" />
   
9.         </s:fill>
   
10.         <s:stroke>
    
11.             <s:SolidColorStroke color="0x131313" weight="2"/>
    
12.         </s:stroke>
    
13.     </s:Ellipse>
    
14. </s:Skin>

注：s:Ellipse：表示畫橢圓
       s:stroke：表示畫線條
       s:fill：表示填充的顏色和透明度
       s:Rect：表示畫矩形，可以帶圓角

TransitionSkin.mxml

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
   
3.         xmlns:s="library://ns.adobe.com/flex/spark"
   
4.         xmlns:mx="library://ns.adobe.com/flex/mx"
   
5.         width="400" height="300">
   
6.     <s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0"
   
7.             bottom="0" left="0">
   
8.         <s:fill>
   
9.             <s:SolidColor color="0x131313" />
   
10.         </s:fill>
    
11.         <s:stroke>
    
12.             <s:SolidColorStroke color="0x131313" weight="2"/>
    
13.         </s:stroke>
    
14.     </s:Rect>
    
15. </s:Skin>

2.3應(yīng)用程序
代碼如下

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <s:Application
   
3.     xmlns:fx="http://ns.adobe.com/mxml/2009"
   
4.     xmlns:s="library://ns.adobe.com/flex/spark"
   
5.     xmlns:mx="library://ns.adobe.com/flex/halo"
   
6.     xmlns:skinsample="nodeexam.*">
   
7. 
   
8.     
   
9.     <skinsample:Node skinClass="nodeexam.TransitionSkin" x="10" y="30" width="50" height="50"/>
   
10.     <skinsample:Node skinClass="nodeexam.PlaceSkin" x="80" y="30" width="50" height="50"/>
    
11. </s:Application>

參考文獻(xiàn)
1.Flex4中的皮膚（1）：自定義SkinnableComponent . http://blog.csdn.net/thinkinside/article/details/4634867