- 浏览: 493780 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
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 5256ArcGIS API for Flex 调 ... -
actionscript 绘制环形(中空)图形
2012-03-20 11:28 1861<?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 82701 首先如何设置 infowindow或infoWindowR ... -
flex builder 配置 文件 中文 乱码
2012-02-11 22:31 1323记事本打开另存,下面的有格式选项,选UTF-8,然后放到项目目 ... -
在Flex4中嵌入字体
2012-02-05 22:10 3153<fx:Style> @namespa ... -
flex4 绕中心 旋转和翻转
2012-01-27 14:30 9167特别参考文章: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 2684大年夜,在整flex 3d旋转呵呵。 传说大年夜写程序,来年发 ... -
Flex皮肤制作笔记
2012-01-16 10:38 1538Titlewindow的创建流程 1、先创建皮肤 命名为:t ... -
Flex 4 设置背景图片
2012-01-16 10:31 3285Flex 3中Canvas是可以设置backgroundIma ... -
谈谈ActionScript垃圾回收
2011-12-09 14:57 1504转自:http://kevincao.com/2011/08/ ... -
actionscript flex 中三维坐标和屏幕(二维)坐标的转换
2011-12-03 17:44 4756flash.display.DisplayObject ... -
arcgis flex api2.4 学习笔记
2011-11-24 19:43 6602本文仅记录通过浏览官 ... -
快速创建精彩的Flash游戏 (二) Flash3D引擎简介
2011-11-19 10:34 1559原帖: http://www.fans8.com/?p=663 ... -
flex 滤镜样式在线预览
2011-11-10 11:26 2134好多效果没用过 -
Flex StringUtil 工具类 字符串函数
2011-10-29 18:35 4593转自:http://www.cnblogs.com/god_b ... -
Flex4 中skinclass使用Path绘制多边形
2011-10-19 22:29 1315skinClass中绘制多边形使用Path标签,把绘制路径放在 ... -
flex 双轴 多曲线
2011-09-08 11:03 1696用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 ...
起点小说解锁.js
299-煤炭大数据智能分析解决方案.pptx
299-教育行业信息化与数据平台建设分享.pptx
网络技术和计算机技术发展至今,已经拥有了深厚的理论基础,并在现实中进行了充分运用,尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代,所以对于信息的宣传和管理就很关键。系统化是必要的,设计网上系统不仅会节约人力和管理成本,还会安全保存庞大的数据量,对于信息的维护和检索也不需要花费很多时间,非常的便利。 网上系统是在MySQL中建立数据表保存信息,运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时,也能及时通过数据输入的有效性规则检测出错误数据,让数据的录入达到准确性的目的,进而提升数据的可靠性,让系统数据的错误率降至最低。 关键词:vue;MySQL;SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
时间复杂度是计算机科学中用来评估算法效率的一个重要指标。它表示了算法执行时间随输入数据规模增长而变化的趋势。当我们比较不同算法的时间复杂度时,实际上是在比较它们在不同输入规模下的执行效率。 时间复杂度通常用大O符号来表示,它描述了算法执行时间上限的增长率。例如,O(n)表示算法执行时间与输入数据规模n呈线性关系,而O(n^2)则表示算法执行时间与n的平方成正比。当n增大时,O(n^2)算法的执行时间会比O(n)算法增长得更快。 在比较时间复杂度时,我们主要关注复杂度的增长趋势,而不是具体的执行时间。这是因为不同计算机硬件、操作系统和编译器等因素都会影响算法的实际执行时间,而时间复杂度则提供了一个与具体实现无关的评估标准。 一般来说,时间复杂度越低,算法的执行效率就越高。因此,在设计和选择算法时,我们通常希望找到时间复杂度尽可能低的方案。例如,在排序算法中,冒泡排序的时间复杂度为O(n^2),而快速排序的时间复杂度在平均情况下为O(nlogn),因此在处理大规模数据时,快速排序通常比冒泡排序更高效。 总之,时间复杂度是评估算法效率的重要工具,它帮助我们了解算法在不同输入规模下的性
5G通信行业、网络优化、通信工程建设资料
网络技术和计算机技术发展至今,已经拥有了深厚的理论基础,并在现实中进行了充分运用,尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代,所以对于信息的宣传和管理就很关键。系统化是必要的,设计网上系统不仅会节约人力和管理成本,还会安全保存庞大的数据量,对于信息的维护和检索也不需要花费很多时间,非常的便利。 网上系统是在MySQL中建立数据表保存信息,运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时,也能及时通过数据输入的有效性规则检测出错误数据,让数据的录入达到准确性的目的,进而提升数据的可靠性,让系统数据的错误率降至最低。 关键词:vue;MySQL;SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
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提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
5G通信行业、网络优化、通信工程建设资料
《基于小程序的交友系统的设计与实现》是一个融合了小程序技术和社交功能的毕业设计项目。该项目旨在通过开发一款小程序,为用户提供一个便捷、有趣的交友平台,满足用户寻找新朋友、拓展社交圈的需求。 一、项目背景与目标 随着移动互联网的普及,小程序以其轻便、易用的特性受到了广大用户的喜爱。本项目旨在利用小程序技术开发一款交友系统,通过简洁明了的界面设计和丰富多样的社交功能,吸引用户参与并提升用户体验。通过实现这一系统,旨在帮助用户拓展社交圈,增进人际关系,并推动社交领域的创新与发展。 二、系统设计与功能实现 用户注册与登录:系统提供用户注册与登录功能,确保用户信息的真实性和安全性。用户可以通过手机号或第三方社交账号进行注册和登录。 个人资料展示:用户可以在个人资料页面展示自己的基本信息、兴趣爱好、照片等,以便其他用户了解并产生互动。 附近的人:系统通过定位功能展示附近的其他用户,用户可以浏览附近的人的信息,并主动发起聊天或交友请求。 聊天功能:系统提供一对一的聊天功能,用户可以与感兴趣的人进行实时交流,增进彼此的了解。 活动组织:用户可以发起或参与各类线下活动,如聚会、运动、旅行
5G通信行业、网络优化、通信工程建设资料
shampoo-sales.csv
59-《煤矿测量规程(1989版)》150.pdf
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提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
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提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
5G通信行业、网络优化、通信工程建设资料。
AXIS T864 系列多通道 AXIS T8646 PoE+ 同轴电缆刀片套件 AXIS T8648 PoE+ 同轴电缆刀片紧凑型套件安装指南
MATLAB学习个人笔记总结.7z