Silverlight图片处理——(伸展,裁剪,蒙版)-阿里云开发者社区

开发者社区> 云原生> 正文
登录阅读全文

Silverlight图片处理——(伸展,裁剪,蒙版)

简介:




Silverlight图片处理——(伸展,裁剪,蒙版)

在我们的应用程序中,图片是少不了的增添应用程序视觉效果的东东啊!但是很多图片是不符合我们程序的要求,那么我们就需要通过处理来达到我们的目的。
SilverlightImage对象的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>
效果如图:
我们可以很清楚看到第1Image对象的Stretch属性值为None;第2Image对象的Stretch属性值为Fill;第3Image对象的Stretch属性值为Uniform;第4Image对象的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属性使用的是alpha32位颜色值,与Offset渐变点配合实现如上的效果,第四个GrandientStop对象的Color属性使用的是Red ,并非alpha通道。所以会被Silverlight忽略了对象的蒙版。



 本文转自 王祖康 51CTO博客,原文链接:http://blog.51cto.com/wzk89/433195,如需转载请自行联系原作者
 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
云原生
使用钉钉扫一扫加入圈子
+ 订阅

云原生时代,是开发者最好的时代

其他文章
最新文章
相关文章