Silverlight中的5种基本变换

转载 2012年03月26日 09:51:08

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" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,50,320,0" Name="image11"
Stretch
="Fill" Width="50" Source="/SLTrans;component/iPhone_001.png" Opacity=".3"/>
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,50,320,0" Name="image1"
Stretch
="Fill" Width="50" Source="/SLTrans;component/iPhone_001.png" >
<Image.RenderTransform>
<RotateTransform CenterX="0" CenterY="0" Angle="45"></RotateTransform>
</Image.RenderTransform>
</Image>

        ScaleTransform:缩放变换

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

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

<!--ScaleTransform变换-->
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="91,50,0,0" Name="image21"
Stretch
="Fill" Width="50" Source="/SLTrans;component/iPhone_002.png" Opacity=".3"/>
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="91,50,0,0" Name="image2"
Stretch
="Fill" Width="50" Source="/SLTrans;component/iPhone_002.png">
<Image.RenderTransform>
<ScaleTransform CenterX="0" CenterY="0" ScaleX="0.6" ScaleY="0.6"></ScaleTransform>
</Image.RenderTransform>
</Image>

        SkewTransform:倾斜变换

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

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

<!--SkewTransform变换-->
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="178,50,0,0" Name="image31"
Stretch
="Fill" Width="50" Source="/SLTrans;component/iPhone_003.png" Opacity=".3"/>
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="178,50,0,0" Name="image3"
Stretch
="Fill" Width="50" Source="/SLTrans;component/iPhone_003.png" >
<Image.RenderTransform>
<SkewTransform CenterX="0" CenterY="0" AngleX="45" AngleY="0"></SkewTransform>
</Image.RenderTransform>
</Image>

        TranslateTransform:移动变换

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

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

<!--TranslateTransform变换-->
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="283,50,0,0" Name="image41"
Stretch
="Fill" Width="50" Source="/SLTrans;component/iPhone_004.png" Opacity=".3"/>
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="283,50,0,0" Name="image4"
Stretch
="Fill" Width="50" Source="/SLTrans;component/iPhone_004.png" >
<Image.RenderTransform>
<TranslateTransform X="10" Y="50"></TranslateTransform>
</Image.RenderTransform>
</Image>

        TransformGroup:变换组

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

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

<!--TransformGroup变换-->
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="378,50,0,0" Name="image51"
Stretch
="Fill" Width="50" Source="/SLTrans;component/iPhone_005.png" Opacity=".3"/>
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="378,50,0,0" Name="image5"
Stretch
="Fill" Width="50" Source="/SLTrans;component/iPhone_005.png" >
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="-1"/>
<TranslateTransform Y="100"/>
</TransformGroup>
</Image.RenderTransform>
</Image>

        其实在Silverlight中,还有一种矩阵变换(MatrixTransform),相较于以上变换更复杂也更灵活,下篇文章将单独以矩阵变换为主题,进行详细的实例分析

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

shader Cg 基本数据类型

1.基本数据类型:Cg支持7种基本的数据类型,分别是:float, 32 位浮点数据,一个符号位。浮点数据类型被所有的 profile 支持 half,16 为浮点数据 int,32 位整形数据,...
  • u011484013
  • u011484013
  • 2016年11月22日 19:44
  • 1562

Win10安装silverlight5开发环境,以及坑

写在开头的话 最近因为一个项目使用silverlight5开发的, 这之前偶尔好像听说过silverlight,但是一直以为是微软的源码管理工具呢,汗… 经过几天了解才知道是微软自己的富客户端开发语言...
  • wantbar
  • wantbar
  • 2017年08月06日 09:51
  • 1843

进程的三种基本状态及转换

.进程的三种基本状态     进程在运行中不断地改变其运行状态。通常,一个运行进程必须具有以下三种基本状态。 就绪(Ready)状态     当进程已分配到除CPU以外的所有必要的资源...
  • songzhaorong
  • songzhaorong
  • 2014年09月09日 20:38
  • 1480

Silverlight学习之RenderTransform特效(五种基本变换)及(矩阵变换MatrixTransform)

RenderTransform特效:   变形(RenderTransform)类是为了达到直接去改变某个Silverlight对象的形状(比如缩放、旋转一个元素)的目的而设计的,RenderT...
  • ghevinn
  • ghevinn
  • 2015年07月27日 21:24
  • 757

搜集:系统5种“基本”功能,供于学习

  • 2011年12月13日 20:58
  • 20KB
  • 下载

Android之网络图片加载的5种基本方式

  • 2017年03月01日 21:21
  • 41.02MB
  • 下载

标准数独解题之旅(用一道数独题讲解最基本的5种解题技巧)

  • 2017年04月11日 15:40
  • 3.56MB
  • 下载

redis实战基础篇:redis的5种数据类型的基本操作

1、string类型 基本操作列表: Command What it does GET 获取指定键对应的值 SET 设定键值 DEL 删除指定键对应的值(对所有数据...
  • u011250882
  • u011250882
  • 2015年08月27日 00:22
  • 540

应用层-个性化推荐系统基本概念及5种常规算法初探

1. 什么是推荐系统? 推荐系统是什么? 如果你是个多年电商(剁手)党,你会说是这个: 如果你是名充满文艺细胞的音乐发烧友,你会答这个: 如果你是位活跃在各大社交平台...
  • qq_34941023
  • qq_34941023
  • 2016年06月24日 00:08
  • 757

Linux系统中进程间通信的5种基本机制

1)管道和FIFO(命名管道)
  • ASMARM
  • ASMARM
  • 2014年06月30日 15:13
  • 807
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Silverlight中的5种基本变换
举报原因:
原因补充:

(最多只允许输入30个字)