免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
最近访问板块 发新帖
查看: 2290 | 回复: 0

FLEX皮肤_自定义圆形和方形节点 [复制链接]

论坛徽章:
0
发表于 2011-12-23 02:24 |显示全部楼层
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.     <skinsample:Node skinClass="nodeexam.TransitionSkin" x="10" y="30" width="50" height="50"/>
  9.     <skinsample:Node skinClass="nodeexam.PlaceSkin" x="80" y="30" width="50" height="50"/>
  10. </s:Application>

参考文献
1.Flex4中的皮肤(1):自定义SkinnableComponent . http://blog.csdn.net/thinkinside/article/details/4634867
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

SACC2021中国系统架构师大会

【数字转型 架构重塑】2021年5月20日-22日第十三届中国系统架构师大会将在云端进行网络直播。

大会为期3天的议程,涉及20+专场,近120个主题,完整迁移到线上进行网络直播对会议组织来说绝非易事;但考虑到云端会议的直播形式可以实现全国各地技术爱好者的参与,也使ITPUB作为技术共享交流平台得到更好的普及,我们决定迎难而上。
http://sacc.it168.com/


大会官网>>
  

北京盛拓优讯信息技术有限公司. 版权所有 16024965号-6 北京市公安局海淀分局网监中心备案编号:11010802020122
中国互联网协会会员  联系我们:huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP