微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Silverlight中的5种基本变换

Silverlight实用窍门系列:Silverlight中的5种基本变换RotateTransform、ScaleTransform、SkewTransform、TranslateTransform、TransformGroup


        在Silverlight中有五种基本变换,分别是RotateTransform:旋转变换、ScaleTransform:缩放变换、SkewTransform:倾斜变换、TranslateTransform:移动变换、TransformGroup:变换组,在这里我们分别讲解这五种变换的使用方法以便在实际应用中更好的应用。

        RotateTransform:旋转变换

        使用方法:设置Angle属性为需要转换的角度,设置其中心点为CenterX、CentyY,这个是X、Y轴的二维平面旋转。

        下面我们来看一个Demo实例,可以设置让图标按照某一个角度旋转,其代码如下:

<!--RotateTransform变换-->
<Image Height="50" HorizontalAlignmentLeft VerticalAlignmentTop Margin0,50,320,0 Nameimage11StretchFill Width Source/SLTrans;component/iPhone_001.png Opacity.3/>image1 >Image.RenderTransformRotateTransform CenterX0 CenterY Angle45></RotateTransform</Image>@H_404_105@

ScaleTransform:缩放变换

        使用方法:使用CenterX 和 CenterY属性指定一个中心点,然后设置ScaleX让对象在X轴进行缩放,设置ScaleY属性让对象在Y轴进行缩放。

        下面我们来看一个Demo实例,可以设置让图标按照某点缩放,其代码如下:

ScaleTransform变换91,0); margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; font-family:'Courier New'">image21/SLTrans;component/iPhone_002.pngimage2ScaleTransform CenterX ScaleX0.6 ScaleYScaleTransform        SkewTransform:倾斜变换

        使用方法:使用AngleX让元素相对X轴倾斜角度,AngleY是让元素围绕Y轴的倾斜角度。同样CenterX和CenterY是中心点位置。

        下面我们来看一个Demo实例,可以设置让图标按照某点倾斜,其代码如下:

SkewTransform变换178,0); margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; font-family:'Courier New'">image31/SLTrans;component/iPhone_003.pngimage3SkewTransform CenterX AngleX AngleYSkewTransform        TranslateTransform:移动变换

        使用方法:X属性定义元素相对其原来位置偏移的X轴像素量。Y属性也是让元素相对原来位置偏移的Y轴像素量。

        下面我们来看一个Demo实例,可以设置让图标移动变换,其代码如下:

TranslateTransform变换283,0); margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; font-family:'Courier New'">image41/SLTrans;component/iPhone_004.pngimage4TranslateTransform X10 YTranslateTransformTransformGroup:变换组

        使用方法:在其内部可以应用多种变换规则,直接在其内添加其他变换方式即可。

        下面我们来看一个Demo实例,可以设置让图标变换多个组,其代码如下:

TransformGroup变换378,0); margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; font-family:'Courier New'">image51/SLTrans;component/iPhone_005.pngimage5TransformGroupScaleTransform ScaleY-1TranslateTransform Y100         其实在Silverlight中,还有一种矩阵变换(MatrixTransform),相较于以上变换更复杂也更灵活,下篇文章将单独以矩阵变换为主题,进行详细的实例分析

       原文地址:http://www.haogongju.net/art/93865

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐