WPF and Silverlight 学习笔记（二十八）：基本图形的使用（3）图形的操作

接上一篇文章，在WPF中对图形进行操作，上一篇文章中使用了ImageSource（BitmapSource）中的两种：

1、使用BitmapImage加载图片 2、使用RenderTargetBitmap创建图片 3、使用RenderTargetBitmap修改图片 本文继续

4、使用WriteableBitmap修改图片 在使用RenderTargetBitmap修改图片中，原图片不变，只相当于在原图片的基础上添加一节新的内容，而如果对图片进行大的更改RenderTargetBitmap就不可以了，我们可以使用WriteableBitmap对图片进行修改，例如将生成一个返向位图：

1: <Window x:Class="WPF_28.Window1"

2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

4:     Title="Window1" Height="300" Width="300" Loaded="Window_Loaded">

5:     <Grid>

6:         <Grid.RowDefinitions>

7:             <RowDefinition Height="1*" />

8:             <RowDefinition Height="1*" />

9:         </Grid.RowDefinitions>

10:         <Image Grid.Row="0" x:Name="sourceImage" Source="http://images.cnblogs.com/logo.gif" />

11:         <Image Grid.Row="1" x:Name="targetImage" />

12:     </Grid>

13: </Window>

1: private void BuildImage()

2: {

3:     BitmapImage img = new BitmapImage();

4:     img.BeginInit();

5:

6:     img.UriSource = new Uri("http://images.cnblogs.com/logo.gif");

7:

8:     img.DownloadCompleted += delegate

9:     {

10:         BitmapSource source = new FormatConvertedBitmap(

11:             img, PixelFormats.Pbgra32, null, 0);

12:

13:         WriteableBitmap bmp = new WriteableBitmap(source);

14:

15:         int width = bmp.PixelWidth;

16:         int height = bmp.PixelHeight;

17:

18:         int[] pixelData = new int[width * height];

19:         int widthInBytes = 4 * width;

20:

21:         bmp.CopyPixels(pixelData, widthInBytes, 0);

22:

23:         for (int i = 0; i < pixelData.Length; i++)

24:         {

25:             pixelData[i] ^= 0x00ffffff;

26:         }

27:

28:         bmp.WritePixels(new Int32Rect(0, 0, width, height), pixelData, widthInBytes, 0);

29:

30:         targetImage.Source = bmp;

31:     };

32:

33:     img.EndInit();

34: }

35:

36: private void Window_Loaded(object sender, RoutedEventArgs e)

37: {

38:     BuildImage();

39: }

执行后的结果如下图所示：



5、图像效果
所有的用户界面元素都有BitmapEffects属性，可以对其内部的内容（不仅是图片）实现某些特殊的效果，例如：

1: <Window x:Class="WPF_28.Window2"

2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

4:     Title="Window2" Height="300" Width="300">

5:     <Grid>

6:         <Grid.RowDefinitions>

7:           <RowDefinition />

8:             <RowDefinition />

9:             <RowDefinition />

10:             <RowDefinition />

11:             <RowDefinition />

12:           <RowDefinition />

13:             <RowDefinition />

14:       </Grid.RowDefinitions>

15:         <Grid.ColumnDefinitions>

16:             <ColumnDefinition Width="3*" />

17:           <ColumnDefinition Width="7*" />

18:         </Grid.ColumnDefinitions>

19:

20:       <TextBlock Grid.Row="0" Grid.Column="0" 

21:                    VerticalAlignment="Center" HorizontalAlignment="Right" Text="原图" />

22:       <Image Grid.Row="0" Grid.Column="1" Margin="5" Source="cnblogs.gif" />

23:

24:         <TextBlock Grid.Row="1" Grid.Column="0"

25:                    VerticalAlignment="Center" HorizontalAlignment="Right" Text="模糊效果" />

26:         <Image Grid.Row="1" Grid.Column="1" Margin="5" Source="cnblogs.gif">

27:           <Image.BitmapEffect>

28:                 <BlurBitmapEffect />

29:           </Image.BitmapEffect>

30:         </Image>

31:

32:       <TextBlock Grid.Row="2" Grid.Column="0" 

33:                    VerticalAlignment="Center" HorizontalAlignment="Right" Text="光晕效果" />

34:         <Image Grid.Row="2" Grid.Column="1" Margin="5" Source="cnblogs.gif">

35:           <Image.BitmapEffect>

36:                 <OuterGlowBitmapEffect />

37:             </Image.BitmapEffect>

38:         </Image>

39:

40:         <TextBlock Grid.Row="3" Grid.Column="0"

41:                    VerticalAlignment="Center" HorizontalAlignment="Right" Text="阴影效果" />

42:         <Image Grid.Row="3" Grid.Column="1" Margin="5" Source="cnblogs.gif">

43:             <Image.BitmapEffect>

44:                 <DropShadowBitmapEffect />

45:             </Image.BitmapEffect>

46:         </Image>

47:

48:         <TextBlock Grid.Row="4" Grid.Column="0"

49:                    VerticalAlignment="Center" HorizontalAlignment="Right" Text="浮雕效果" />

50:         <Image Grid.Row="4" Grid.Column="1" Margin="5" Source="cnblogs.gif">

51:             <Image.BitmapEffect>

52:                 <BevelBitmapEffect />

53:             </Image.BitmapEffect>

54:         </Image>

55:

56:         <TextBlock Grid.Row="5" Grid.Column="0"

57:                    VerticalAlignment="Center" HorizontalAlignment="Right" Text="浮雕效果2" />

58:         <Image Grid.Row="5" Grid.Column="1" Margin="5" Source="cnblogs.gif">

59:             <Image.BitmapEffect>

60:                 <EmbossBitmapEffect />

61:             </Image.BitmapEffect>

62:         </Image>

63:

64:         <TextBlock Grid.Row="6" Grid.Column="0"

65:                    VerticalAlignment="Center" HorizontalAlignment="Right" Text="组合效果" />

66:         <Image Grid.Row="6" Grid.Column="1" Margin="5" Source="cnblogs.gif">

67:             <Image.BitmapEffect>

68:                 <BitmapEffectGroup>

69:                     <BlurBitmapEffect Radius="1" />

70:                     <OuterGlowBitmapEffect GlowColor="Red" />

71:                 </BitmapEffectGroup>

72:             </Image.BitmapEffect>

73:         </Image>

74:     </Grid>

75: </Window>

6、使用TransformedBitmap实现图片的旋转

1: <Image Source="cnblogs.gif" Margin="60">

2:     <Image.RenderTransform>

3:         <TransformGroup>

4:             <ScaleTransform ScaleX="1" ScaleY="1"/>

5:           <SkewTransform AngleX="-30" AngleY="0"/>

6:             <RotateTransform Angle="-33"/>

7:       </TransformGroup>

8:     </Image.RenderTransform>

9: </Image>

本系列博客索引页