Silverlight图片处理——(伸展,裁剪,蒙版)
2011-09-27 01:25
281 查看
Silverlight图片处理——(伸展,裁剪,蒙版)
在我们的应用程序中,图片是少不了的增添应用程序视觉效果的东东啊!但是很多图片是不符合我们程序的要求,那么我们就需要通过处理来达到我们的目的。
在Silverlight中Image对象的Stretch属性可以控制图片在容器中的伸展方式,便于使用我们不同的需求。Stretch属性是枚举类型,每个对象对应一种伸展方式。下面让我们来看看Stretch的属性成员吧!
None:表示将图片直接填充到Image对象容器指定区域,保存原始尺寸,不做任何伸展处理。如果我们容器大于图片,那么就会看到空白区域;如果容器小于图片,就会看到图片被裁剪。
Uniform:属性的默认值,表示图片保持原始比例,来适应容器的高度和宽度。如果两个比例不相等,将会出现空白区域。
Fill:不考虑图片的原始比例,完全填充整个Image对象所设置的区域。如果两者比例不相等,图片就会发生变形。
UniformToFill:表示图片原始比例,完全填充整个Image对象所设置的区域。如果两者比例不相等,将会自动裁剪部分图片。
我们还是通过一些代码来更好的诠释这些属性的效果吧!
效果如图:
我们可以很清楚看到第1个Image对象的Stretch属性值为None;第2个Image对象的Stretch属性值为Fill;第3个Image对象的Stretch属性值为Uniform;第4个Image对象的Stretch属性值为UniformToFill。
Silverlight的剪裁是作用在作用在最终的显示输出上,与图片本身没有关系,我们只需要在XAML文档中使用属性Clip来设置就行了。代码如下:
效果如图:
我们可以看到图片的裁剪属性的用法和文本内容的裁剪属性用法非常相似,我们可以通过设置Silverlight更多的派生类来实现我们想要的效果。
在Silverlight中我们可以使用Image对象的OpacityMask属性制作不透明蒙版。这里我们需要注意的是OpacityMask属性值必须支持alpha通道的任意Brush对象。如果属性设置为非alpha通道值(比如说红色,绿色,蓝色),那么蒙版就会被忽略。
代码如下:
效果如图:
我们可以看到前三个GrandientStop对象的Color属性使用的是alpha的32位颜色值,与Offset渐变点配合实现如上的效果,第四个GrandientStop对象的Color属性使用的是Red ,并非alpha通道。所以会被Silverlight忽略了对象的蒙版。
本文来自王祖康的博客,原文地址:http://www.cnblogs.com/wzk89/archive/2010/11/26/1888833.html
在我们的应用程序中,图片是少不了的增添应用程序视觉效果的东东啊!但是很多图片是不符合我们程序的要求,那么我们就需要通过处理来达到我们的目的。
在Silverlight中Image对象的Stretch属性可以控制图片在容器中的伸展方式,便于使用我们不同的需求。Stretch属性是枚举类型,每个对象对应一种伸展方式。下面让我们来看看Stretch的属性成员吧!
None:表示将图片直接填充到Image对象容器指定区域,保存原始尺寸,不做任何伸展处理。如果我们容器大于图片,那么就会看到空白区域;如果容器小于图片,就会看到图片被裁剪。
Uniform:属性的默认值,表示图片保持原始比例,来适应容器的高度和宽度。如果两个比例不相等,将会出现空白区域。
Fill:不考虑图片的原始比例,完全填充整个Image对象所设置的区域。如果两者比例不相等,图片就会发生变形。
UniformToFill:表示图片原始比例,完全填充整个Image对象所设置的区域。如果两者比例不相等,将会自动裁剪部分图片。
我们还是通过一些代码来更好的诠释这些属性的效果吧!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <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来设置就行了。代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <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通道值(比如说红色,绿色,蓝色),那么蒙版就会被忽略。
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <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忽略了对象的蒙版。
本文来自王祖康的博客,原文地址:http://www.cnblogs.com/wzk89/archive/2010/11/26/1888833.html
相关文章推荐
- Silverlight图片处理——(伸展,裁剪,蒙版) 推荐
- Silverlight图片处理——(伸展,裁剪,蒙版)
- C#图片处理示例(裁剪,缩放,清晰度,水印)
- C#图片压缩裁剪处理
- [Silverlight]使用WritableBitmap将图片处理成为黑白图片
- 图片处理笔记for silverlight 和 Windows Phone 7
- laravel处理图片的包,裁剪,水印等等
- 图库/拍照获取图片后裁剪处理(兼容4.4+)
- C#图片处理基本应用(裁剪,缩放,清晰度,水印)
- Java图片缩略图裁剪水印缩放旋转压缩转格式-Thumbnailator图像处理
- php GD库裁剪、加水印图片处理
- 基于JQuery实现的图片自动进行缩放和裁剪处理
- C#图片处理示例(裁剪,缩放,清晰度,水印)
- jcrop处理图片裁剪
- C#图片处理高级应用(裁剪,缩放,清晰度,水印)
- 【图片裁剪】移动端一些处理措施
- 函数计算-触发OSS来处理图片加水印和大小裁剪
- iOS处理系统相册裁剪后图片
- 一步一步学Silverlight 2系列(28):图片处理
- 一步一步学Silverlight 2系列(28):图片处理