FLEX皮肤_自定义圆形和方形节点

sinkingboat

1.概述
      节点效果如下，可以用于Petri网的节点表示等。


2.开发过程
2.1创建一个节点类
      节点类必须继承SkinnableComponent，这样才能设置皮肤
代码如下

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应用程序
代码如下

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>

参考文献
1.Flex4中的皮肤（1）：自定义SkinnableComponent . http://blog.csdn.net/thinkinside/article/details/4634867