`
pyleaf
  • 浏览: 39150 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

Cookbook4 笔记 第三章

    博客分类:
  • Flex
 
阅读更多

3.6 子元素的延迟创建与回收
使用HorizontalLayout, VerticalLayout或TileLayout的useVirtualLayout属性,程序只在可视区域创建项目渲染器,内容滚动时,程序将重用隐藏项的项目渲染器

 

<s:DataGroup width="150" height="120" itemRenderer="spark.skins.spark.DefaultItemRenderer">
	<s:layout>
		<s:VerticalLayout useVirtualLayout="true"/>
	</s:layout>
</s:DataGroup>

 

3.9 运行时改变元素的深度(类似图层效果,位于上层的元素将遮盖下层元素)

mx.core.IVisualElement.depth(value:Number):void

 修改索引为i的元素的深度

var element:IVisualElement = group.getElementAt(i) as IVisualElement;
element.depth = group.numElements - 1;

 

3.10 使用3D模型旋转

var matrix:Matrix3D = button.getLayoutMatrix3D();
// 在 Matrix3D 对象上后置一个增量旋转。
matrix.appendRotation(90, Vector3D.Z_AXIS);
// [只写] 用于相对于其同级组件计算组件的布局的转换矩阵。
button.layoutMatrix3D = matrix;

 或使用rotationX属性设置旋转角度

<s:Rect id="rect" rotationZ="{rot}" width="110" height="50">
	<s:fill>
		<s:SolidColor color="#000000"/>
	</s:fill>
</s:Rect>

3.11 旋转子元素但不影响容器布局及其他子元素

如左图显示,右图为3.10的方式


<!-- 效果见左图 -->
<s:BorderContainer x="41" y="11">
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<s:Button label="above">
		<!-- 定义能够应用于对象转换且在一定程度上对其父布局不可视的一组调整。 -->
		<s:postLayoutTransformOffsets>
			<!-- 表示2D或3D转换的对象 -->
			<mx:TransformOffsets rotationZ="90"/>
		</s:postLayoutTransformOffsets>
	</s:Button>
	<s:Button label="below"/>
</s:BorderContainer>
<!-- 效果见右图 -->
<s:BorderContainer x="175" y="11">
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<s:Button label="above" rotationZ="90"/>
	<s:Button label="below"/>
</s:BorderContainer>

旋转动画效果

 

<fx:Declarations>
	<s:Rotate3D id="rotator1" autoCenterTransform="true" target="{btn1}" angleXFrom="0" angleXTo="360" />
</fx:Declarations>
<s:Button id="btn1" label="(0) button" click="{rotator1.play();}" />

 

 在AS中旋转控件

 

mx.core.UIComponent.transformAround(
	transformCenter:Vector3D, //旋转中心点
	scale:Vector3D=null, //缩放(影响布局)
	rotation:Vector3D=null, //旋转(影响布局)
	translation:Vector3D=null, //平移(影响布局)
	postLayoutScale:Vector3D=null, //缩放(不影响布局)
	postLayoutRotation:Vector3D=null, //旋转(不影响布局)
	postLayoutTranslation:Vector3D=null, //平移(不影响布局)
	invalidateLayout:Boolean=true
):void

 postLayoutXXX会产生上例左图的效果

 

3.12 自定义3D布局

好吧,Flex的布局太强大了,恨不得把整段示例代码都贴上来。都是前面章节介绍过的知识点。

还有,想做好看的布局,把初高中的代数书拿出来重新学一下三角函数吧。

 

3.13 编程的方式实现滚动

 

<fx:Declarations>
	<fx:String id="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit.</fx:String>
</fx:Declarations>
<s:HSlider id="slider"
		   minimum="0"
		   maximum="{group.contentHeight - group.height}"
		   liveDragging="true" />
<s:DataGroup id="group" width="100" height="100"
			 clipAndEnableScrolling="true"
			 itemRenderer="spark.skins.spark.DefaultItemRenderer">
	<s:layout>
		<s:VerticalLayout id="vLayout"
						  verticalScrollPosition="{slider.value}" />
	</s:layout>
	<s:dataProvider>
		<mx:ArrayCollection source="{txt.split(' ')}" />
	</s:dataProvider>
</s:DataGroup>
 

3.14 在基于序列的布局中限定元素的可见性(布局滚动到指定元素索引处)

 

private function scrollTo(index:int):void {
	// spark.layouts.VerticalLayout.fractionOfElementInView(index:int):Number
	// 如果指定的索引完全在视图中,则返回 1.0;
	// 如果不在视图中,则返回 0.0;
	// 如果部分处于视图中,则返回在 0.0 和 1.0 之间的一个值(表示处于视图中的部分的百分比)。 
	var amt:Number = (group.layout as VerticalLayout).fractionOfElementInView(index);
	if (amt < 1.0) {
		// spark.layouts.supportClasses.LayoutBase.getScrollPositionDeltaToElement(index:int):Point
		// 计算所需的 verticalScrollPosition 和 horizontalScrollPosition delta,以将处于指定索引处的元素滚动到视图中。 
		// delta代表差值
		var pt:Point = group.layout.getScrollPositionDeltaToElement(index);
		if (pt != null)
			group.verticalScrollPosition += pt.y;
	}
}
 

我想了半天,delta到底是什么东西,字典解释是希腊字母,我突然想到以前代数里面有个三角形的希腊字母,表示两个量之间的差值,再根据代码上下文,断定就是它了,没错。

 

第三章终于完事了,真累。

话说刚拿到Flex4权威指南的时候用了2天就全看完了,包括自己手敲代码(之前Flex3权威指南看完一大半,4的内容确实比3少很多)。看英文又慢又累……

权威指南是入门级的,cookbook则更像是进阶级的

  • 大小: 1.3 KB
分享到:
评论

相关推荐

    PHP Cookbook读书笔记 &amp;ndash; 第15章创建Web服务.docx

    在PHP Cookbook的第15章中,作者详细介绍了如何利用`SOAPClient`和`SOAPServer`类来构建Web服务。 首先,让我们来看看创建SOAP客户端。`SOAPClient`是PHP提供的用于与SOAP服务器通信的类。在示例中,`SOAPClient`被...

    思科 Cisco IOS Cookbook 中文精简版 V1.5版

    相比于第一版,《思科 Cisco IOS Cookbook》第二版进行了多项改进和更新: - **书名变化**:从“Cisco Cookbook”更改为“Cisco IOS Cookbook”,更加准确地反映了书籍的内容,突出了其针对思科IOS系统的重点。 - *...

    UVM大百科(含各项UVM教程,笔记及代码).rar

    3. **UVM Cookbook**: 类似于烹饪书,UVM Cookbook提供了一系列实用的代码示例和解决方案,帮助开发者解决常见的验证问题,比如如何编写测试用例,如何实现复杂的交互序列等。 4. **SV_UVM_Debug**: 这部分专注...

    vue2+vue3笔记

    Vue 是什么特点:声明式Vue-&gt;resource-&gt; awesome vue 和 cookbook 重点关注下面代码,第一个正常输出尚硅谷,第二个原格式输出{{name}}。 十九、MVVM 模型 理解 MVVM原理:把数据丢到框架中该放的位置,框架帮做一...

    PCB电磁兼容设计技术资料大放送-第一季.part3.rar

    注意,本文档由3部分组成,详细的包含以下部分的文档,仔细看清楚有没有用,这是第三部分 1. EMI Troubleshooting Cookbook for Product Designers, 2014 2. Grounds for Grounding A Circuit to System Handbook 3....

    PCB电磁兼容设计技术资料大放送-第一季.part2.rar

    4. 电磁兼容导论 第2版 中英文 5.电磁兼容工程英文版(Electromagnetic Compatibility Engineering) 6.Controlling Radiated Emissions by Design, 3ed, 2014 7. High-speed Digital Design 中英文版 8.实用电子元...

    PCB电磁兼容设计技术资料大放送-第一季.part1.rar

    4. 电磁兼容导论 第2版 中英文 5.电磁兼容工程英文版(Electromagnetic Compatibility Engineering) 6.Controlling Radiated Emissions by Design, 3ed, 2014 7. High-speed Digital Design 中英文版 8.实用电子元...

    PySD-Cookbook:用于系统动力学模型强大分析的简单食谱

    每个配方的结构如下: 技术介绍及其与系统动力学的关系使用该技术所需的成分演示模型的描述演示数据说明有关使用中的特定第三方python库的说明使用代码示例进行分析所需的步骤如何使用本食谱可轻松阅读此链接的链接...

    python网络编程学习笔记(10):webpy框架

    它强调代码复用,多个组件可以很方便的以“插件”形式服务于整个框架,Django有许多功能强大的第三方插件,你甚至可以很方便的开发出自己的工具包。这使得Django具有很强的可扩展性。它还强调快速开发和DRY(Do Not ...

    完整详细版Python全套教学课件 第01节 01python概述及环境搭建.pptx

    Python 环境搭建及基础知识概述 本节课程主要介绍 Python 语言的概述、环境...* 学习 Python Cookbook、Learn Python The Hard Way、Google's Python Class 等书籍。 * 写 20000 行有效代码,实践是学习的最佳方式。

    notes_to_self:技术说明

    Android开发者经常使用第三方库来加速开发进程。常见的库有Retrofit用于网络请求,RxJava进行异步处理,Room进行数据库操作,以及Butter Knife进行视图绑定。了解如何集成和使用这些库是Android开发的关键技能。 5...

    PythonPrimer.pdf

    4. 创建第一个Python程序: 编写一个简单的Python程序hello.py,内容为print('Hello Python!')。当运行此脚本时,屏幕上会显示Hello Python!。 5. Python注释与基础语法: Python使用#符号定义注释,以提高代码...

Global site tag (gtag.js) - Google Analytics