Silverlight图片处理——（伸展，裁剪，蒙版）

Silverlight图片处理——（伸展，裁剪，蒙版）

在我们的应用程序中，图片是少不了的增添应用程序视觉效果的东东啊！但是很多图片是不符合我们程序的要求，那么我们就需要通过处理来达到我们的目的。

在Silverlight中Image对象的Stretch属性可以控制图片在容器中的伸展方式，便于使用我们不同的需求。Stretch属性是枚举类型，每个对象对应一种伸展方式。下面让我们来看看Stretch的属性成员吧！

None：表示将图片直接填充到Image对象容器指定区域，保存原始尺寸，不做任何伸展处理。如果我们容器大于图片，那么就会看到空白区域；如果容器小于图片，就会看到图片被裁剪。

Uniform：属性的默认值，表示图片保持原始比例，来适应容器的高度和宽度。如果两个比例不相等，将会出现空白区域。

Fill：不考虑图片的原始比例，完全填充整个Image对象所设置的区域。如果两者比例不相等，图片就会发生变形。

UniformToFill：表示图片原始比例，完全填充整个Image对象所设置的区域。如果两者比例不相等，将会自动裁剪部分图片。

我们还是通过一些代码来更好的诠释这些属性的效果吧！

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

         <Grid.ColumnDefinitions>

                <ColumnDefinition/>

                <ColumnDefinition/>

         </Grid.ColumnDefinitions>

         <Grid.RowDefinitions>

                <RowDefinition/>

                <RowDefinition/>

         </Grid.RowDefinitions>

         <Image Source="A5.jpg" Grid.Column="0" Grid.Row="0" Stretch="None" Width="200" Height="200" Margin="64,16,56,24"/>

         <Image Source="A5.jpg" Grid.Column="1" Grid.Row="0" Stretch="Fill" Width="200" Height="200" Margin="64,16,56,24"/>

         <Image Source="A5.jpg" Grid.Column="0" Grid.Row="1" Stretch="Uniform" Width="200" Height="200" Margin="64,16,56,24"/>

         <Image Source="A5.jpg" Grid.Column="1" Grid.Row="1" Stretch="UniformToFill" Width="200" Height="200" Margin="64,16,56,24"/>

  </Grid>

效果如图：

 

我们可以很清楚看到第1个Image对象的Stretch属性值为None；第2个Image对象的Stretch属性值为Fill；第3个Image对象的Stretch属性值为Uniform；第4个Image对象的Stretch属性值为UniformToFill。

Silverlight的剪裁是作用在作用在最终的显示输出上，与图片本身没有关系，我们只需要在XAML文档中使用属性Clip来设置就行了。代码如下：

<StackPanel Background="White" Orientation="Horizontal">

         <Image Source="A5.jpg" Width="300" Height="200">

                <Image.Clip>

                       <EllipseGeometry Center="100,100" RadiusX="60" RadiusY="60"/>

                </Image.Clip>

         </Image>

         <Image Source="A5.jpg" Width="300" Height="200">

                <Image.Clip>

                       <PathGeometry>

                              <PathFigure StartPoint="0,200" IsClosed="True">

                                     <PolyLineSegment Points="100,0"/>

                                     <PolyLineSegment Points="200,200"/>

                              </PathFigure>

                       </PathGeometry>

                </Image.Clip>

         </Image>

  </StackPanel>

效果如图：

 

我们可以看到图片的裁剪属性的用法和文本内容的裁剪属性用法非常相似，我们可以通过设置Silverlight更多的派生类来实现我们想要的效果。

在Silverlight中我们可以使用Image对象的OpacityMask属性制作不透明蒙版。这里我们需要注意的是OpacityMask属性值必须支持alpha通道的任意Brush对象。如果属性设置为非alpha通道值（比如说红色，绿色，蓝色），那么蒙版就会被忽略。

代码如下：

<Grid Background="AliceBlue">

         <Grid.ColumnDefinitions>

                <ColumnDefinition/>

                <ColumnDefinition/>

         </Grid.ColumnDefinitions>

         <Grid.RowDefinitions>

                <RowDefinition/>

                <RowDefinition/>

         </Grid.RowDefinitions>

         <Image Source="A5.jpg" Width="200" Height="150" Grid.Column="0" Grid.Row="0">

                <Image.OpacityMask>

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

                              <GradientStop Color="#00000000" Offset="0"/>

                              <GradientStop Color="#EE000000" Offset="0.8"/>

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

                       </LinearGradientBrush>

                </Image.OpacityMask>

         </Image>

         <Image Source="A5.jpg" Width="200" Height="150" Grid.Column="1" Grid.Row="0">

                <Image.OpacityMask>

                       <RadialGradientBrush>

                              <GradientStop Color="#00000000" Offset="0"/>

                              <GradientStop Color="#EE000000" Offset="0.8"/>

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

                       </RadialGradientBrush>

                </Image.OpacityMask>

         </Image>

         <Image Source="A5.jpg" Width="200" Height="150" Grid.Column="0" Grid.Row="1">

                <Image.OpacityMask>

                       <SolidColorBrush Color="#77000000"/>

                </Image.OpacityMask>

         </Image>

         <Image Source="A5.jpg" Width="200" Height="150" Grid.Column="1" Grid.Row="1">

                <Image.OpacityMask>

                       <SolidColorBrush Color="Red"/>

                </Image.OpacityMask>

         </Image>

  </Grid>

效果如图：

 

我们可以看到前三个GrandientStop对象的Color属性使用的是alpha的32位颜色值，与Offset渐变点配合实现如上的效果，第四个GrandientStop对象的Color属性使用的是Red ，并非alpha通道。所以会被Silverlight忽略了对象的蒙版。