特别参考文章:http://uh.9ria.com/space-28025-do-blog-id-10991.html
http://www.cnblogs.com/yjmyzz/archive/2010/05/20/1740377.html
1 简单方法1:可以通过设置autoCenterTransform为true或false来控制组件是绕中心点旋转还是绕左上角旋转 和翻转 例如
<s:Rotate3D id="rotateEffect" target="{apanel}" autoCenterTransform="true"/>
代码中:{
rotateEffect.angleXFrom=0;
rotateEffect.angleXTo=旋转值; //上下翻转
rotateEffect.play();
}
如果要设置旋转中心为其他任意点:
<s:Rotate3D id="rotateEffect" target="{apanel}" autoCenterTransform="false
" transformX="150" transformY="150"/>
即使用transformX和transformY 设置旋转中心。
同样也可以设置缩放中心:
<s:Scale3D id="scaleEffect" target="{apanel
}" autoCenterTransform="false" transformX="100" transformY="200" />
另外投影中心autoCenterProjection及projectionX,projectionY又是另外一回事。
2 简单方法2:我们知道flex组件 默认的旋转中心点是左上点,同时组件的child也以此为中心点变化,那么把child的中心和父组件的左上角对齐,然后旋转父容器,那么child就成了以自己的中心点旋转的效果:
-------------------------------------------------------------------------------------------
换句话说,被旋转的其实是父容器,child的中心和父容器旋转中心重叠而已,貌似child绕自己的中心旋转了
用这种办法可以任意设置图片的旋转、翻转及缩放的中心。
代码如:
<s:BorderContainer id="containerPnl" toolTip="父容器" width="100" height="100" x="250" y="250">
<s:Panel width="200" height="200" x="-100" y="-100" id="apnl" title="子容器" />
</s:BorderContainer>
然后旋转父容器: containerPnl.rotationX=45 ;
- 大小: 16 KB
- 大小: 19.8 KB
分享到:
相关推荐
Flex实现的朝4个方向翻转的效果,可以扩展实现很多特殊展示效果
Flex开发的,照片查看器,很好 看,与大家共享下
flex 六面体翻转例子
flex 图片自动旋转移动放大,自动旋转移动 自动旋转
Flex3D旋转效果 Flex实现3d 3dRotation Flex学习3d教程 flex builder 如何做出3D效果
Flex做的非常好的一个效果例子,Flex开门,关门,翻转,效果。
Flex电子相册旋转
flex 特效 立方体旋转,翻页特效,开门关门特效等实例代码
FLEX4的皮肤skin.教你如何使用皮肤
flex4 实战 flex4 in action pdf源码和配套的源码 和大家分享
FLEX4_Flex4教程 - FLEX4从入门到精通,挺不错的值得一看
Flex 4 高级编程Flex 4 高级编程Flex 4 高级编程Flex 4 高级编程
程序通过图片的展示实现产品图片的旋转视角效果
基于flex4技术从零开发flex博客系统 : 1 开发环境配置与hello world(1) - 豆豆网 flex+blazeDs与Ext+dwr比较_蓝色幻想_百度空间 基于blazeDS的flex4与spring的程序实例步骤 - dreamming_now的专栏 - CSDN博客 在...
Flex电子相册旋转一
Flex4中引入了新的ui组件,提供了更好的性能监控,并且大大提高了编译速度。《Flex 4实战》是一本全面的指南,为web设计人员和开发人员提供了Flex的详细介绍。《Flex 4实战》从基础讲起,介绍了有关表单和数据的知识...
flex4出来一段时间了,去年看了一段时间flex3,后来由于暂时没有项目需求.所以flex遗忘了很多.这次使用flex4+myeclipse8.5录制了一个视频.以免时间长了遗忘. 软件环境:windows7+flex4+myeclipse8.5+blazeds 功能描述...
flex旋转图很好的示例代码
FLEX4从入门到精通,挺不错的值得一看
flex4 flex4与服务器通信 flex 与java通信