码迷,mamicode.com
首页 > 其他好文 > 详细

Sliverlight变换特性

时间:2014-05-22 16:40:37      阅读:421      评论:0      收藏:0      [点我收藏+]

标签:des   style   class   blog   c   code   

通过变换,可以为Silverlight图形对象提供旋转、缩放、扭曲和移动的特效。如果图形元素需要通过修改坐标系统来改变元素显示,可能需要使用变换功能。一般来说,所有的变换使用矩形数学改变图形元素的坐标来实现,也就是使用silverlight提供的MatrixTransform对象。通常使用系统内置的变换,比如TranslaterTransform、RotateTransform、ScaleTransform和SkewTransform。

 

Silverlight 提供两类变换对象,一类用于处理比较通用的变换任务,共4中:

  • RotateTransform:旋转变换,通过指定一个角度值来旋转一个图形对象。
  • ScaleTransform:缩放变换,通过指定ScaleX和ScaleY数值缩放一个图像对象
  • SkewTransform:扭曲变换,通过指定AngleX和AngleY值来扭曲一个图像对象
  • TranslateTransform:移动变换:通过指定x和y的值来移动一个对象

另外一类通常用于创建复杂的变换特效,共有如下两种:

  • TransformGroup:变换组合,通过组合多个变换,使之在同一时刻应用多个变换。
  • MatrixTransform:矩阵变换,通过直接操作一个矩阵来创建自定义变换。

 

RotateTransform

旋转变换用于将图形对象旋转一个指定的角度,具有如下3个属性。

  • Angle:旋转指定角度值,默认为0
  • CenterX:旋转的水平中心点,默认值为0
  • CenterY:旋转的垂直中心点,默认值为0

 

bubuko.com,布布扣
<Grid x:Name="LayoutRoot" Background="White">
        <Canvas>
            <TextBlock Text="不指定旋转x,y来旋转图片" FontSize="20" Canvas.Left="50" Canvas.Top="50"></TextBlock>
            <Image x:Name="pic" Source="95.jpg" Width="300" Height="400" Canvas.Left="100" Canvas.Top="100">
                <Image.RenderTransform>
                    <RotateTransform Angle="20"/>
                </Image.RenderTransform>
            </Image>
        </Canvas>
    </Grid>
bubuko.com,布布扣

 

在这段代码中没有设置CenterX和CenterY的值来旋转了一张图片,运行效果如下图:

bubuko.com,布布扣

bubuko.com,布布扣
<Grid x:Name="LayoutRoot" Background="White">
        <Canvas>
            <TextBlock Text="不指定旋转x,y来旋转图片" FontSize="20" Canvas.Left="50" Canvas.Top="50"></TextBlock>
            <Image x:Name="pic" Source="95.jpg" Width="300" Height="400" Canvas.Left="100" Canvas.Top="100">
                <Image.RenderTransform>
                    <RotateTransform Angle="20"/>
                </Image.RenderTransform>
            </Image>
            <TextBlock Text="指定旋转基点x,y的值分别为中心点" FontSize="20" Canvas.Left="600" Canvas.Top="200">
                <TextBlock.RenderTransform>
                    <RotateTransform Angle="30" CenterX="50" CenterY="0"/>
                </TextBlock.RenderTransform>
            </TextBlock>
        </Canvas>
    </Grid>
bubuko.com,布布扣

 

设置了CenterX和CenterY的值后将在该点的位置对整个文字进行旋转,效果如下图:

bubuko.com,布布扣

ScaleTransform

缩放变换用于放大或缩小一个图形对象,可以水平缩放或者垂直缩放,或者同时水平或垂直缩放,需要用到的变换属性有4个

  • ScaleX:增加图形对象的宽度,默认值为1
  • ScaleY:增加图形对象的高度,默认值为1
  • CenterX:水平缩放的方向,默认值为0
  • CenterY:垂直缩放的方向,默认值为0

ScaleX和ScaleY通常以对象的倍数值进行赋值,比如0.5表示比原图形对象缩小一半,2表示放大一倍

 

bubuko.com,布布扣
<UserControl x:Class="Transform.ScaleTransform"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    
    <Grid x:Name="LayoutRoot" Background="White">
        <Canvas>
            <TextBlock Text="原图" FontSize="20" Canvas.Left="40"/>
            <Image Source="535.jpg" Width="140" Height="200" Canvas.Left="30" Canvas.Top="50"></Image>

            <TextBlock Text="水平放大两倍" FontSize="20" Canvas.Left="240"/>
            <Image Source="535.jpg" Width="140" Height="200" Canvas.Left="230" Canvas.Top="50">
                <Image.RenderTransform>
                    <ScaleTransform ScaleX="2"></ScaleTransform>
                </Image.RenderTransform>
            </Image>

            <TextBlock Text="垂直缩小一半" FontSize="20" Canvas.Left="550"/>
            <Image Source="535.jpg" Width="140" Height="200" Canvas.Left="550" Canvas.Top="50">
                <Image.RenderTransform>
                    <ScaleTransform ScaleY="0.5"></ScaleTransform>
                </Image.RenderTransform>
            </Image>

            <TextBlock Text="水平和垂直放大,并指定中心点" FontSize="20" Canvas.Left="250" Canvas.Top="300"/>
            <Image Source="535.jpg" Width="140" Height="200" Canvas.Left="300"  Canvas.Top="400">
                <Image.RenderTransform>
                    <ScaleTransform ScaleX="2" ScaleY="2" CenterX="50" CenterY="50"></ScaleTransform>
                </Image.RenderTransform>
            </Image>
        </Canvas>
    </Grid>
</UserControl>
bubuko.com,布布扣

 

 

 

 

 

运行效果如下图所示:

bubuko.com,布布扣

SkewTransform

扭曲变换用于将一个图形扭曲指定的角度,需要使用的变换属性有如下4个:

  • AngleX:水平扭曲值,默认为0
  • AngleY:垂直扭曲值,默认为0
  • CenterX:扭曲水平基点,默认为0
  • CenterY:扭曲垂直基点,默认为0

 

bubuko.com,布布扣
<UserControl x:Class="Transform.SkewTransform"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    
    <Grid x:Name="LayoutRoot" Background="White">
        <Canvas>
            <TextBlock Text="原图" FontSize="20" Canvas.Left="40"/>
            <Image Source="729.jpg" Width="140" Height="200" Canvas.Left="30" Canvas.Top="50"></Image>

            <TextBlock Text="水平扭曲50度" FontSize="20" Canvas.Left="240"/>
            <Image Source="729.jpg" Width="140" Height="200" Canvas.Left="230" Canvas.Top="50">
                <Image.RenderTransform>
                    <SkewTransform AngleX="50"></SkewTransform>
                </Image.RenderTransform>
            </Image>

            <TextBlock Text="垂直扭曲20度" FontSize="20" Canvas.Left="550"/>
            <Image Source="729.jpg" Width="140" Height="200" Canvas.Left="550" Canvas.Top="50">
                <Image.RenderTransform>
                    <SkewTransform AngleY="20"></SkewTransform>
                </Image.RenderTransform>
            </Image>

            <TextBlock Text="指定中心点水平和垂直扭曲" FontSize="20" Canvas.Left="250" Canvas.Top="300"/>
            <Image Source="729.jpg" Width="140" Height="200" Canvas.Left="300"  Canvas.Top="400">
                <Image.RenderTransform>
                    <SkewTransform AngleY="10" AngleX="10" CenterX="100" CenterY="50"></SkewTransform>
                </Image.RenderTransform>
            </Image>
        </Canvas>
    </Grid>
</UserControl>
bubuko.com,布布扣

 

运行效果如下图:

bubuko.com,布布扣

TranslateTransform

移动变换道理同上,比较简单,这里就不举例了,需要用到的属性有:

  • X:水平移动的距离,默认值为0
  • Y:垂直移动的距离,默认值为0

 

 

Sliverlight变换特性,布布扣,bubuko.com

Sliverlight变换特性

标签:des   style   class   blog   c   code   

原文地址:http://www.cnblogs.com/xmfdsh/p/3742743.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!