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

入门10-Transform(变换)的应用

分类：Silverlight作者：编程之家AI导航网

接着介绍一下Silverlight变换（Transform）的应用

首先，说一下Silverlight支持的四种变形效果：
- 旋转效果  <RotateTransform... />
- 移动效果  <TranslateTransform.../ >
- 倾斜效果  <SkewTransform.../ >
- 缩放效果  <ScaleTransform.../ >

这些效果可以叠加使用，可以把各种变形效果声明放在<TransformGroup.../ >中。
四种变形效果的功能说明如下：
RotateTransform  通过<RotateTransform... />的Angle属性来旋转一个角度；
TranslateTransform 通过<TranslateTransform.../ >的X和Y属性来指定对象的位移量；
SkewTransform 通过 <SkewTransform.../ >的AngleX与AngleY属性来指定一个倾斜角度；
ScaleTransform 通过<ScaleTransform.../ >的ScaleX和ScaleY属性来指定放大与缩小的倍数；

变形效果适用对象类型(参考Silverlight 1.0 HELP文档)：
- 笔刷Brush
  - SolidColorBrush
  - LinearGradientBrush
  - RadialGradientBrush
  - ImageBrush
  - VideoBrush
- 几何对象Geometry
  - EllipseGeometry
  - LineGeometry
  - PathGeometry
  - RectangleGeometry
- UIElement
  - Canvas
  - Ellipse
  - Glyphs
  - Image
  - MediaElement
  - Retangle
  - polygon
  - polyline
  - Shape
  - TextBlock
  - Path
  - Line
  - InkPresener
  - Run

下面一一介绍这些变换效果的重要属性。
RotateTransform
==================================
Angle     旋转角度
CenterX   旋转中心点横坐标
CenterY   旋转中心点纵坐标
以上三属性值都是Double型的；
基本语法：
<RotateTransform Angle="Double" CenterX="Double" CenterY="Double" />
==================================

ScaleTransform
==================================
ScaleX    沿X轴缩放的倍数
ScaleY    沿Y轴缩放的倍数
CenterX   缩放中心点横坐标
CenterY   缩放中心点纵坐标
以上四属性值都是Double型的；
基本语法：
<ScaleTransform ScaleX="Double" ScaleY="Double" CenterX="Double" CenterY="Double" />
==================================

SkewTransform
==================================
AngleX    沿X轴倾斜角度
AngleY    沿Y轴倾斜角度
CenterX   缩放中心点横坐标
CenterY   缩放中心点纵坐标
以上四属性值都是Double型的
基本语法：
<SkewTransform AngleX="Double" AngleY="Double" CenterX="Double" CenterY="Double" />
==================================

TranslateTransform
==================================
X    沿X轴位移量
Y    沿Y轴位移量
以上两属性值都是Double型的
基本语法：
<TranslateTransform X="Double" Y="Double" />
==================================

以下给出相应几例代码：
代码1  RotateTransform效果
==================================
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas Background="LightBlue" Width="300" Height="300">
        <TextBlock Name="myTextBlock1" Canvas.Left="60" Canvas.Top="65"
     FontFamily="Arial" FontStyle="normal" FontSize="50" Foreground="silver"
     Width="300" Height="300" textwrapping="Wrap">
     Microsoft  
     <TextBlock.RenderTransform>
         <RotateTransform Angle="45" CenterX="50" CenterY="50" />       
     </TextBlock.RenderTransform>
        </TextBlock>
    </Canvas>
</Canvas>
==================================

ScaleTransform效果示例请参阅应用1-五星红旗
下面给出一ScaleTransform经典应用-倒影
==================================
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas Canvas.Left="40" Canvas.Top="50">
        <!--TextBlock 1-->
        <TextBlock Text="Microsoft" Foreground="Blue" FontSize="50"/>
  <!--TextBlock 2-->
  <TextBlock Text="Microsoft" Foreground="silver" Canvas.Top="135" FontSize="50">
      <TextBlock.RenderTransform>
          <ScaleTransform ScaleY="-1"/>
      </TextBlock.RenderTransform>   
        </TextBlock>
    </Canvas>
</Canvas>
==================================


代码3  SkewTransform效果
==================================
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas x:Name="parentCanvas">
        <!--Original Text-->
  <TextBlock Text="Microhoo" FontSize="30" Foreground="Black" Canvas.Left="100" Canvas.Top="30" />
  <!--TextBlock 1-->
  <TextBlock Text="Microhoo" FontSize="30" Foreground="Blue" Canvas.Left="120" Canvas.Top="80">
      <TextBlock.RenderTransform>
          <SkewTransform AngleX="-30"/>
      </TextBlock.RenderTransform>
  </TextBlock>
  <!--TextBlock 2-->
  <TextBlock Text="Microhoo" FontSize="30" Foreground="Red" Canvas.Left="80" Canvas.Top="130">
      <TextBlock.RenderTransform>
          <SkewTransform AngleX="30"/>
      </TextBlock.RenderTransform>
  </TextBlock>
  <!--TextBlock 3-->
  <TextBlock Text="Microhoo" FontSize="30" Foreground="Orange" Canvas.Left="80" Canvas.Top="180">
      <TextBlock.RenderTransform>
          <SkewTransform AngleX="30" AngleY="15"/>
      </TextBlock.RenderTransform>
  </TextBlock>
        <!--TextBlock 4-->
        <TextBlock Text="Microhoo" FontSize="30" Foreground="silver" Canvas.Left="80" Canvas.Top="230">
      <TextBlock.RenderTransform>
          <SkewTransform AngleY="-45"/>
      </TextBlock.RenderTransform>
 </TextBlock>
        <!--TextBlock 5-->
        <TextBlock Text="Microhoo" FontSize="30" Foreground="purple" Canvas.Left="80" Canvas.Top="130">
      <TextBlock.RenderTransform>
          <SkewTransform AngleY="45"/>
      </TextBlock.RenderTransform>
  </TextBlock>
    </Canvas>
</Canvas>
==================================

代码4  TranslateTransform效果
==================================
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas >
        <!--Image Origion-->
        <Image Source="MyPic.jpg" Opacity="0.5">
            <Image.RenderTransform>
          <TranslateTransform X="0" Y="0"/>
      </Image.RenderTransform>
        </Image>
        <!--Image Transalte-->
        <Image Source="MyPic.jpg" >
            <Image.RenderTransform>
                <TranslateTransform X="100" Y="100"/>
            </Image.RenderTransform>
        </Image>
    </Canvas>
</Canvas>
==================================
将以上四段代码，依次粘贴到入门1中的myxaml.xaml中，后双击SampleHTMLPage.html运行，即可看到结果。


我们也可以把多种变换效果放在一个效果群组中组合起来使用，这里使用TransformGroup来声明多个效果。
<TransformGroup>
    <RotateTransform... />
    <SkewTransform... />
    <TranslateTransform... />
    <ScaleTransform... />
</TransformGroup>
大家可以试着将上述几例修改后运行，看看组合效果的威力。

最后再介绍一个比较复杂的变换效果，叫做矩阵变换效果(MatrixTransform)。
实质上，所有的变换效果都是衍生于变换矩阵(Matrix)，此矩阵是一3*3矩阵。各参数如下：

################################
M11               M12                           
Default: 1.0     Default: 0.0      0.0
################################
M12               M22                          
Default: 0.0     Default: 1.0      0.0        
################################
OffsetX           OffsetY                      
Default: 0.0     Default: 0.0      1.0        
################################

其中第三列,0.0,1.0为常数列，这是因为Silverlight只支持仿射变换（affine transform），所以最后一列总是：0 0 1
通过以上矩阵信息我们可以验证得知，其实TranslateTransform效果相当于下列矩阵效果：
1        　　 0             0
0       　　   1             0
OffsetX        OffsetY    1
其中OffsetX控制X轴的坐标位移，OffsetY控制Y轴的坐标位移

ScaleTransform效果相当于下列矩阵效果：
M11    0       　0
0     　M22      0
0     　0      　 1
其中M11控制ScaleX，M22控制ScaleY

RotateTransform相当于下列矩阵效果：
cos(a)   sin(a)   0
sin(-a)   cos(a)  0
0           0        1
a是设置的旋转角度

SkewTransform相当于下列矩阵效果：
SkewX效果:
1          0    0
tan(a)   1    0
0          0    1

SkewY效果:
1   tan(a) 0
0   1      0
0   0      1
其中a是Skew的角度
大家可以设置不同的效果进行验证

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　锐意进取  大胆创新                                        　　　　　　　　　　　　　　　　　　　　　　蒙哥马利 朱 

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

相关推荐

c# – 如何在Silverlight 4中绑定ContextMenu的IsEnabled属性？
如何在Silverlight4(XAML)中绑定IsEnabled属性？我试过简单的IsEnabled=“{BindingABC}”,但这不起作用–MenuItem总是启用.提前感谢您的线索！干杯编辑：有趣的是,当设置Mode=TwoWay时,绑定似乎有效.但是,在菜单项上移动鼠标后,将更新上下文菜单的外观.这是异步工作吗？右键
c# – 使用Silverlight / windows手机式控件设置我的.Net桌面应用程序GUI
我正在编写我的第一个vb.net应用程序(但我也会在这里标记c#,因为我确信即使是一个c#人也可以使用类似的.net实现来回答这个问题).我申请的简短说明：我的桌面应用程序将仅在win平台上运行,使用vb.net,它是一个简单的网吧管理软件,在服务器上运行服务器gui,在工作站上运行客户端gui,
c# – Silverlight：将服务调用和文件处理移动到后台线程
ProcessFile()是在UIThread上运行还是在单独的线程上运行.如果它在UIThread上,如何将文件请求和ProcessFile()移动到单独的线程？varxClient=newServiceReference1.Service1SoapClient();xClient.Retrieve_File_Completed+=newEventHandler<ServiceReference1.Retrieve_Fi
c# – 如何从ASP.NET / Silverlight开发人员成为sharepoint开发人员？
我从同行那里听说,对sharepoint的了解对职业生涯有益.我们不在办公室使用sharepoint.所以不知道如何开始.这些是我的新手问题>学习共享点值得努力吗？>学习sharepoint的资源在哪里？>我是否应该考虑开发哪些参考项目？感谢您的意见.解决方法:SharePoint以如此积极的方式改变了我的职业
c# – Windows Phone 8 – 将列表保存到IsolatedStorage
我正在尝试保存一个类我的类对象的集合.我收到一个错误说明：Thecollectiondatacontracttype‘System.Collections.Generic.Listcannotbedeserializedbecauseitdoesnothaveapublicparameterlessconstructor.Addingapublicparameterlessconstructorwillf
c# – 在XAML中使用绑定设置样式
我需要根据Silverlight中的某些配置值设置给定控件的Style.我想有可能从两种可用的样式(静态资源)中选择一个控件样式.我试图做一些像：<TextBoxStyle="{BindingABC}"/>哪里publicstringABC{get{return"{StaticResourceMyStyle}";}}不幸的是,这不起作用.你有
Android设备上的Silverlight / Moonlight
我刚买了第一台Android设备,我喜欢它…我也很喜欢你可以创建自己的应用程序并随意分发它们.我已经阅读了一些关于Monodroid的内容,而且显然微软希望将Silverlight放在这些设备上,尽管没有太多关于它们的信息……但是Moonlight呢？如果Monodroid就像Mono……为什么我们需要它呢？相反
c# – 从silverlight应用程序访问SQL Server数据库
我们的ASP.NET网站允许用户执行各种查询,并根据从数据库查询的结果显示网络图(如UML图).目前,我们正在生成一个位图并显示它.但由于我们需要支持允许用户以交互方式显示/隐藏某些块的功能,因此我们计划使用Silverlight来渲染图形.我们还计划在未来添加更多互动.我有两个问题：>ASP
c# – 自定义Silverlight启动画面导致白屏死机
我正在开发一个Silverlight4应用程序,我已经创建了一个自定义的启动画面.乍一看,自定义启动画面运行良好–非常好.几天后,我开始注意到闪屏不再显示,屏幕仍然是空白.这似乎只发生在我打开多个指向同一个应用程序的IE选项卡/窗口时.前几个将加载正常,而以下选项卡/窗口将保持“白
c# – 使用带偏移的RotateTransform问题旋转图像
这是我的XAML：<ImageVerticalAlignment="Center"HorizontalAlignment="Center"Source="{BindingInput,Converter={StaticResourceByteArrayToBitmapConverter}}"><Image.Rend
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native