WEB开发网
开发学院图形图像Flash 学Silverlight 2系列(29):使用Transform实现更... 阅读

学Silverlight 2系列(29):使用Transform实现更炫的效果(上)

 2008-10-03 11:38:24 来源:WEB开发网   
核心提示: 倾斜变换(SkewTransform)倾斜变换SkewTransform允许我们对元素围绕一点进行一定角度的倾斜,可以通过属性AngleX和AngleY分别设置在X轴和Y轴上倾斜角度,学Silverlight 2系列(29):使用Transform实现更炫的效果(上)(3),以及Cente

学Silverlight 2系列(29):使用Transform实现更炫的效果(上) 

倾斜变换(SkewTransform)

倾斜变换SkewTransform允许我们对元素围绕一点进行一定角度的倾斜,可以通过属性AngleX和AngleY分别设置在X轴和Y轴上倾斜角度,以及CenterX和CenterY来指定一个变换中心点。如下面的例子:

<Canvas Background="#CDFCAE">
  <Image Source="a1.png" Canvas.Left="80" Canvas.Top="20" Opacity="0.5">
  </Image>
  <Image Source="a1.png" Canvas.Left="80" Canvas.Top="20">
    <Image.RenderTransform>
      <SkewTransform AngleX="30" AngleY="30"></SkewTransform>
    </Image.RenderTransform>
  </Image>
</Canvas>

运行后的效果如下:

学Silverlight 2系列(29):使用Transform实现更炫的效果(上)

移动变换(TranslateTransform)

移动变换TranslateTransform允许我们对元素在X轴和Y轴上做一定位置的移动,通过属性X和Y两个属性来指定,如下面的例子,对图片和文字做一些移动变换,使其显示出阴影效果:

<Canvas Background="#CDFCAE">
  <Image Source="a1.png" Canvas.Left="80" Canvas.Top="80" Opacity="0.5">
  </Image>
  <Image Source="a1.png" Canvas.Left="80" Canvas.Top="80">
    <Image.RenderTransform>
      <TranslateTransform X="-10" Y="-10"></TranslateTransform>
    </Image.RenderTransform>
  </Image>
  
  <TextBlock Canvas.Top="80" Canvas.Left="360" FontWeight="Bold"
        Text="博客园" FontSize="60" Foreground="#C1C1C1">
    <TextBlock.RenderTransform>
      <TranslateTransform X="5" Y="5"></TranslateTransform>
    </TextBlock.RenderTransform>
  </TextBlock>
  <TextBlock Canvas.Top="80" Canvas.Left="360" FontWeight="Bold"
        Text="博客园" FontSize="60" Foreground="#FF0000"></TextBlock>
</Canvas>

运行后效果如下所示:

上一页  1 2 3 4  下一页

Tags:Silverlight 系列 使用

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接