transformX和projectionCenter的设置

transformX是UIComponent的属性。
projectionCenter是PerspectiveProjection的属性,间接的可以应用到全部显示对象上。

官方的介绍

transformX

设置组件转换中心的 x 坐标。

projectionCenter

表示投影中心的二维点,它是显示对象的消失点。

projectionCenter 属性是相对于默认注册点(即舞台左上角的点 (0,0))的偏移量。默认的投影转换中心位于舞台中间,这意味着当三维显示对象沿 z 轴后移时,这些对象会朝着舞台中心消失。

如何设置

  • transformX要采用其所在显示对象的坐标系。
  • projectionCenter要采用其父容器的坐标系。

实测

下面是transformX和transformY的设置实例,注释的代码可以实现不同的效果。另外需要说明的是:transformX和transformY可以在显示对象之外。

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       width="1600"
                       height="900"
                       backgroundColor="0x00FF00"
                       applicationComplete="windowedapplication1_applicationCompleteHandler(event)"
                       >
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            import org.libspark.betweenas3.BetweenAS3;
            import org.libspark.betweenas3.tweens.ITween;
            import org.libspark.betweenas3.tweens.ITweenGroup;
            [Bindable]
            [Embed(source="/ripplestest/Chrysanthemum.jpg")]
            private var jhClass:Class;
            [Bindable]
            [Embed(source="/ripplestest/Desert.jpg")]
            private var smClass:Class;
            protected function windowedapplication1_applicationCompleteHandler(event:FlexEvent):void
            {
//              sm.transformX=sm.width>>1;sm.transformY=sm.height>>1;// 这行设置缩放中心在sm的中心点
//              sm.transformX=0;sm.transformY=sm.height>>1;// 这行设置以x=0,y=sm.height>>1转换
                sm.transformX=sm.width;sm.transformY=sm.height;// 这行设置以x=sm.width,y=sm.height转换
                sm.scaleX=0.5;
                sm.scaleY=0.5;
                var tween1:ITween,tween2:ITween,tween3:ITween;
                var tG:ITweenGroup;
                tween1 = BetweenAS3.tween(
                    sm,
                    {scaleX:0.5,scaleY:0.5},
                    {scaleX:1,scaleY:1},
                    2
                );
                tween2= BetweenAS3.tween(
                    sm,
                    {rotationX:180},
                    null,
                    2
                    );
                tween3= BetweenAS3.tween(
                    sm,
                    {rotationY:180},
                    null,
                    2
                );
                tG=BetweenAS3.serial(tween1,tween2,tween3);
                tG.play();
            }

        ]]>
    </fx:Script>
    <s:Group id="myGroup">
        <s:Image id="jh" source="{jhClass}"/>
        <s:Image id="sm" source="{smClass}" />
    </s:Group>
</s:WindowedApplication>

下面是一个projectionCenter设置的实例,注释的行是不同的消失点效果。

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       width="1600"
                       height="900"
                       applicationComplete="windowedapplication1_applicationCompleteHandler(event)"
                       >
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            import org.libspark.betweenas3.BetweenAS3;
            import org.libspark.betweenas3.tweens.ITween;

            [Bindable]
            [Embed(source="/ripplestest/Chrysanthemum.jpg")]
            private var jhClass:Class;
            [Bindable]
            [Embed(source="/ripplestest/Desert.jpg")]
            private var smClass:Class;

            protected function windowedapplication1_applicationCompleteHandler(event:FlexEvent):void
            {
                var tween:ITween;
                var perspective:PerspectiveProjection =   
                    sm.transform.perspectiveProjection ? sm.transform.perspectiveProjection : new PerspectiveProjection();
                // 以下设置projectionCenter,都是采用sm的父容器myGroup的坐标系
                perspective.projectionCenter = new Point( 0, 0); // 1消失点在myGroup的坐标点
//              perspective.projectionCenter = new Point( myGroup.width, myGroup.height);// 2消失点在myGroup的右下角
//              perspective.projectionCenter = new Point( sm.x, sm.y);// 3消失点在sm的坐标点
//              perspective.projectionCenter = new Point( sm.x+sm.width, sm.y+sm.height);// 4消失点在sm的右下角 和2一致
//              perspective.projectionCenter = new Point( sm.x+(sm.width>>1), sm.y+(sm.height>>1));// 5消失点在sm的中心点
                sm.transform.perspectiveProjection = perspective;
                tween = BetweenAS3.tween(
                    sm,
                    {z:99999},
                    {z:-200},
                    10
                );
                tween.play();
            }
        ]]>
    </fx:Script>
    <s:Group id="myGroup" >
        <s:Rect width="1024" height="768" >
            <s:fill>  
                <s:SolidColor color="#00FF00"/>  
            </s:fill>  
        </s:Rect>
        <s:Image id="jh" source="{jhClass}" x="100" y="100" alpha="0.5" />
        <s:Image id="sm" source="{smClass}" x="100" y="100" />
    </s:Group>
</s:WindowedApplication>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值