- 浏览: 494027 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
Tang叁藏:
没图啊!!楼主
天地图-地图投影技术剖析与思考 -
liuxing8807:
不知道怎么用
google地图经纬度偏移修正算法完美解决方案 -
copyday:
step6是Foo, step7是Bar。(foo和bar 中 ...
osworkflow学习笔记-这一步步是咋连起来的呢 -
haowanlisx:
谢谢!太感谢,我还以为flex3不能实现用组件导出excel呢 ...
FileReference.save()方法找不到? -
shootboss:
问下,用infoWindowRenderer怎样才能监听到in ...
ags infoWindow 应用
原文:http://ctwen.iteye.com/blog/654848
1. Flex 4 默认为Spark主题,Spark组件的外观设计与之前相比也变得更简单高效。
Spark组件都不包含可视外观属性,所有这类信息都包含在外观文件SkinClass中。
SkinClass借助 FXG和状态语法完成组件的交互式设计,其使用MXML编写新的外观文件。
在组件中则通过skinClass属性来应用相关外观文件,
如: <s:Button label="myButton" skinClass="myButtonSkin"/>。
以下是本人写的一个简单的ButtonSkinClass:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
alpha.disabled="0.7">
<s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/>
</s:states>
<s:filters>
<s:DropShadowFilter alpha="0.5" distance="1.2" quality="2" excludeFrom="down"/>
</s:filters>
<s:Rect id="myMain" radiusX="4" radiusY="4" top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="0x5bc1e9" color.over="0xcfc851" color.down="0xb19600"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x001fa4" weight="1"/>
</s:stroke>
</s:Rect>
<s:Rect id="myTop" radiusX="4" radiusY="4" top="1" right="1" left="1" height="50%">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF" alpha="0.7"/>
<s:GradientEntry color="0xFFFFFF" alpha="0.2"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Label text="myButton" verticalCenter="2" horizontalCenter="0" textAlign="center" fontWeight="bold" color="0x131313" color.over="0x0150ad" color.down="0x0150ad"/>
</s:Skin>
效果如下图:
2. SkinClass借助 FXG和状态语法完成组件的交互式设计。
FXG也有类似提取公共方法的功能,其实现依靠Library标签。
比如设计中用到好多处外观相同的“竖线”,不过摆放的位置不同,当然不用每用到一处就写一遍相似度达99%的代码,使用FXG的Library标签就可以将其提取简化。
直接把“竖线”代码放在<fx:Library/>中,设好其id,下面用到处使用<fx:id x="..." y="..."/>进行调用便可。
以下是本人写的一个简单实例:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Library>
<fx:Definition name="fg">
<s:Group alpha="0.5">
<s:Line x="1" xFrom="0.5" xTo="0.5" yTo="34">
<s:stroke>
<s:SolidColorStroke color="#ffffff" caps="none" weight="1" joints="miter" miterLimit="4"/>
</s:stroke>
</s:Line>
<s:Line xFrom="0.5" xTo="0.5" yTo="34">
<s:stroke>
<s:SolidColorStroke color="#000000" caps="none" weight="1" joints="miter" miterLimit="4"/>
</s:stroke>
</s:Line>
</s:Group>
</fx:Definition>
</fx:Library>
<s:states>
<s:State name="normal"/>
</s:states>
<s:filters>
<s:DropShadowFilter alpha="0.5" angle="90" distance="1.7" quality="2"/>
</s:filters>
<s:Path winding="nonZero" data="M0.5 35.5L0.5 4.5C0.5 2.29102 2.29102 0.5 4.5 0.5L730.5 0.5C732.709 0.5 734.5 2.29102 734.5 4.5L734.5 35.5" >
<s:fill>
<s:LinearGradient x="367.5" y="35.5" scaleX="35" rotation="-90">
<s:GradientEntry color="#00738c" ratio="0"/>
<s:GradientEntry color="#49b7d3" ratio="0.04"/>
<s:GradientEntry color="#366cad" ratio="0.96"/>
<s:GradientEntry color="#bfeffb" ratio="1"/>
</s:LinearGradient>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="#001fa4" caps="none" weight="1" joints="miter" miterLimit="4"/>
</s:stroke>
</s:Path>
<fx:fg x="465" y="1"/>
<fx:fg x="600" y="1"/>
</s:Skin>
效果如下图:
3. SkinClass借助FXG和状态语法完成组件的交互式设计。
FXG对于复杂的图形会生成多而繁琐的代码,这时还不如使用一张透明的PNG图片代替来得“划算”。
当然SkinClass中也有插入图片的标签,就是<s:BitmapImage/>。其插入图片非常方便,也可随意缩放、旋转等。
以下是本人写的一个简单实例:
Rect矩形(圆角矩形),以下是基本的一些属性:
width <length>: 矩形的宽度。
height <length>: 矩形的高度。
radiusX <length>: 圆角矩形,圆角在X轴椭圆半径的弯道,此值四舍五入。
radiusY <length>: 圆角矩形,圆角在y轴椭圆半径的弯道,此值四舍五入。
rotation <Number>: 旋转角度,正数为顺时针,负数为逆时针。
scaleX <Number>: x轴缩放,1为100%。
scaleY <Number>: y轴缩放,1为100%。
visible <Boolean>: 可见性。
Ellipse椭圆(圆形),以下是基本的一些属性:
width <length>: 椭圆的宽度。
height <length>: 椭圆的高度。
rotation <Number>: 旋转角度,正数为顺时针,负数为逆时针。
scaleX <Number>: x轴缩放,1为100%。
scaleY <Number>: y轴缩放,1为100%。
visible <Boolean>: 可见性。
Line直线,以下是基本的一些属性:
xFrom <Number>: X轴起点,默认为0。
yFrom <Number>: y轴起点,默认为0。
xTo <Number>: X轴终点,默认为0。
yTo <Number>: y轴终点,默认为0。
rotation <Number>: 旋转角度,正数为顺时针,负数为逆时针。
scaleX <Number>: x轴缩放,1为100%。
scaleY <Number>: y轴缩放,1为100%。
alpha <Number>: 不透明度,1为100%。
visible <Boolean>: 可见性。
FXG的复杂图形使用Path来绘制。
以下是一个尖角向下的红色三角形的绘制(其主要通过节点坐标来绘制):
<Path data="M 0 0 L 100 0 L 50 100 Z">
<fill>
<SolidColor color="#FF0000"/>
</fill>
</Path>
P.S. data中M表示起始位置,Z表示返回到起始位置。
发表评论
-
ArcGIS API for Flex 调用天地图、e都会瓦片地图
2012-05-30 18:59 5257ArcGIS API for Flex 调 ... -
actionscript 绘制环形(中空)图形
2012-03-20 11:28 1864<?xml version="1.0&q ... -
绘制环形/中空图形
2012-03-20 11:21 0<?xml version="1.0" ... -
flex4 表格加载 xml文件数据
2012-02-19 17:27 0<fx:Declarations> < ... -
ags infoWindow 应用
2012-02-13 16:32 82731 首先如何设置 infowindow或infoWindowR ... -
flex builder 配置 文件 中文 乱码
2012-02-11 22:31 1327记事本打开另存,下面的有格式选项,选UTF-8,然后放到项目目 ... -
在Flex4中嵌入字体
2012-02-05 22:10 3156<fx:Style> @namespa ... -
flex4 绕中心 旋转和翻转
2012-01-27 14:30 9171特别参考文章:http://uh.9ria.com/space ... -
在Flash和Flex中用matrix.rotate方法实现显示对象绕点旋转
2012-01-26 21:57 2自转与公转 http://uh.9ria. ... -
Flex 3D旋转的各种实现
2012-01-22 23:55 2685大年夜,在整flex 3d旋转呵呵。 传说大年夜写程序,来年发 ... -
Flex皮肤制作笔记
2012-01-16 10:38 1542Titlewindow的创建流程 1、先创建皮肤 命名为:t ... -
Flex 4 设置背景图片
2012-01-16 10:31 3288Flex 3中Canvas是可以设置backgroundIma ... -
谈谈ActionScript垃圾回收
2011-12-09 14:57 1506转自:http://kevincao.com/2011/08/ ... -
actionscript flex 中三维坐标和屏幕(二维)坐标的转换
2011-12-03 17:44 4759flash.display.DisplayObject ... -
arcgis flex api2.4 学习笔记
2011-11-24 19:43 6604本文仅记录通过浏览官 ... -
快速创建精彩的Flash游戏 (二) Flash3D引擎简介
2011-11-19 10:34 1563原帖: http://www.fans8.com/?p=663 ... -
flex 滤镜样式在线预览
2011-11-10 11:26 2136好多效果没用过 -
Flex StringUtil 工具类 字符串函数
2011-10-29 18:35 4596转自:http://www.cnblogs.com/god_b ... -
Flex4 中skinclass使用Path绘制多边形
2011-10-19 22:29 1317skinClass中绘制多边形使用Path标签,把绘制路径放在 ... -
flex 双轴 多曲线
2011-09-08 11:03 1698用FLEX 4的时候 用secondVerticalAxis ...
相关推荐
flex4里引入了sparkSkin, spark包里的可视控件可以通过指定skinClass的值来修改控件的默认皮肤。 下面是一个如何自定义某个scrollbar的外观的例子。
//首先将dll文件引用到项目中,然后添加这三个using using CCWin; using CCWin.SkinControl; using CCWin.SkinClass; namespace ZCXMS.TempleteTester {//此处把Form改成CCSkinMain public partial class ...
电子、通信、计算机大类学生课程实验的心得体会 电子、通信、计算机大类的学生课程实验是工科教育中非常重要的一环,它不仅能够加深学生对理论知识的理解,还能培养学生的实践能力和创新思维。
【营销】任务一金融产品与金融产品营销认识.docx
1.了解LED数码管的工作原理,为秒表时钟模块的实现打下基础。 LED数码管是一种常用的数字显示器件,通过控制每个LED的亮灭来显示数字。在秒表时钟模块中,我们需要利用LED数码管的这一特性,通过单片机控制数码管的显示,从而实现时钟的功能。因此,了解LED数码管的工作原理对于实现秒表时钟模块至关重要。 2.掌握51单片机与LED数码管的接口技术,是实现秒表时钟模块的关键。 51单片机是一种常用的微控制器,可以通过接口与外部设备进行通信。在秒表时钟模块中,我们需要通过单片机与LED数码管之间的接口,控制数码管的显示。因此,掌握51单片机与LED数码管的接口技术是实现秒表时钟模块的关键。在实际操作中,我们需要根据接口协议和数据传输方式,编写相应的程序来控制数码管的显示。 3.合理利用定时器/计数器,是实现秒表时钟模块的效率保障。 在秒表时钟模块中,我们需要实现计时功能,这需要使用到定时器/计数器。定时器/计数器可以用来产生计时脉冲,从而控制秒表的计时。通过合理利用定时器/计数器,可以提高秒表时钟模块的计时精度和效率。在实际操作中,我们需要根据具体的应用场景和需求,选择合适的定时器/计数器参
个人98分期末大作业项目,代码完整下载可用。主要针对计算机相关专业的正在做课程设计和期末大作业的学生和需要项目实战练习的学习者。包含全部项目源码、该项目可以直接使用、项目都经过严格调试,下载即用确保可以运行!
实验室管理微信小程序设计
机械设计CNC自动打孔机(sw18可编辑+工程图)非常好的设计图纸100%好用.zip
51单片机使用蜂鸣器来播放音乐蜂鸣器播放音乐-小星星亮晶晶 通过PWM信号来控制蜂鸣器,改变PWM的频率,可以改变蜂鸣器的发声音调,从而可以播.适合新手使用
机械设计德国6层电万能蒸烤箱(sw21可编辑+cad)非常好的设计图纸100%好用.zip
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
超声波传感器系列 UFA-150, UFA-200 安装指南
VOS4890 户外电源系统 用户手册
金融产品可行性报告.docx
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
printer.cfg
【计算机二级实操】液晶背光开关控制实验(汇编语言).zip
基于Spring Boot和Vue的音乐网站系统是一种使用Spring Boot框架和Vue框架进行开发的在线音乐平台系统。下面是一个简单的介绍: 后端(Spring Boot)部分: 1. 数据库设计:设计合适的数据库模式来存储音乐信息,包括歌曲、专辑、歌手等相关信息。 2. 接口设计:根据需求设计合适的RESTful API接口,用于处理前端请求。您可以使用Spring MVC来开发这些接口,并使用Spring Data JPA来处理数据库访问。 3. 用户管理:实现用户注册、登录、权限管理等功能。使用Spring Security来处理用户认证和授权。 4. 音乐资源管理:上传/编辑/删除音乐、/删除/编辑/分类专辑和歌手等功能。您可以使用Spring Boot提供的文件上传和管理功能,以及数据库来存储和管理相关信息。 5. 推荐系统:实现根据用户的兴趣和行为进行个性化的音乐推荐。可以使用协同过滤、内容推荐或机器学习等技术来进行推荐算法的实现。 前端(Vue)部分: 1. 页面设计:使用Vue框架用户界面,包括首页、歌单推荐、搜索、歌手页面等。使用Vue Router
中国各地级市工业三废数据(2006-2021年).xlsx
本项目致力于基于扩散模型的半监督脑肿瘤分割,旨在提高医学影像在脑肿瘤诊断中的应用。项目利用扩散模型对脑部MRI影像中的肿瘤区域进行精确分割。 在数据集方面,我们使用了公开的脑部MRI影像数据集,如BRATS、Medical Segmentation Decathlon等,并进行了预处理,包括格式转换、裁剪、翻转等操作。在环境搭建方面,我们使用Python编程语言,基于TensorFlow和PyTorch深度学习框架进行开发。为了提高计算效率,我们还使用了GPU加速计算。此外,我们还采用了Docker容器技术,确保实验结果的可重复性。 项目完成后,将实现对脑部MRI影像中肿瘤区域的精确分割,为脑肿瘤的诊断和治疗提供有力支持。同时,项目成果也可应用于其他医学影像分析领域,如肿瘤检测、病变分割等。