技术开发 频道

Silverlight 边学边练 图形变换

 【IT168技术文档】本篇主要针对图形变换进行操练,其中涉及到图形旋转和不透明蒙板相关知识。

 最后通过这两种技术完成一个倒影的实例。

 首先,先看看旋转操作,将一个长方体以其中心为原点顺时针旋转30度。

 <Canvas>

 <Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow"

 Canvas.Left="100" Canvas.Top="100" RenderTransformOrigin="0.5,0.5">

 <Rectangle.RenderTransform>

 <RotateTransform Angle="30" />

 </Rectangle.RenderTransform>

 </Rectangle>

 </Canvas>

 其次,将一个按键进行不透明处理。

 <Canvas>

 <Button FontSize="24" FontWeight="Bold" Content="This is Transparent Button">

 <Button.OpacityMask>

 <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">

 <GradientStop Offset="0" Color="Transparent"></GradientStop>

 <GradientStop Offset="0.8" Color="Black"></GradientStop>

 </LinearGradientBrush>

 </Button.OpacityMask>

 </Button>

 </Canvas>

 最后,进行倒影效果处理,可通过对RenderTransformOrigin和ScaleY的参数调整来理解图形变换的方式。

 <Grid x:Name="LayoutRoot" Background="White">

 <!--创建两行Grid-->

 <Grid.RowDefinitions>

 <RowDefinition></RowDefinition>

 <RowDefinition></RowDefinition>

 </Grid.RowDefinitions>

 <!--原始图片放在第一行-->

 <Image Grid.Row="0" Source="silverlight.jpg"></Image>

 <!--倒影图片放在第二行,变换原点设为:"0.5,0.48"-->

 <Image Grid.Row="1" Source="silverlight.jpg" RenderTransformOrigin="0.5,0.48">

 <!--将倒影图片在Y轴上以“-1”比例缩放,达到反转效果-->

 <Image.RenderTransform>

 <ScaleTransform ScaleY="-1"></ScaleTransform>

 </Image.RenderTransform>

 <!--最后为倒影图片增加一个线性不透明蒙板-->

 <Image.OpacityMask>

 <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

 <GradientStop Offset="0" Color="Transparent"></GradientStop>

 <GradientStop Offset="1" Color="#80000000"></GradientStop>

 </LinearGradientBrush>

 </Image.OpacityMask>

 </Image>

 </Grid>

查看原文地址

0
相关文章