WPF图形绘制教程

1、本篇将记录一下如何在WPF中绘画和设计动画，这方面一直都不是VS的强项，然而它有一套利器Blend；这方面也不是我的优势，幸好我有博客园，能记录一下学习的过程。在本记录中，为了更好的理解绘画与动画，多数的例子还是在VS里面敲出来的。好了，不废话了，现在开始。一、WPF绘画1.1基本图形在WPF中可以绘制矢量图，不会随窗口或图型的放大或缩小出现锯齿或变形，除此之外，XAML绘制出来的图有个好处就是便于修改，当图不符合要求的时间，通常改某些属性就可以完成了。下面先记录一下几个基本的图形（他们都派生于Shape类）。Line 直线段Rectangle 矩形Ellipse 

2、;椭圆Polygon 多边形Polyline 折线，不闭合Path 路径1.2笔刷常用的笔刷Brush类型有：· SolidColorBrush：使用纯 Color 绘制区域。· LinearGradientBrush：使用线性渐变绘制区域。 其中有个GradientStop属性，径向渐变也有可以查看msdn，我觉得上面说的还是比较清楚的。· RadialGradientBrush：使用径向渐变绘制区域。· ImageBrush：使用图像（由 I

3、mageSource 对象表示）绘制区域。· DrawingBrush：使用 Drawing 绘制区域。 绘图可能包含向量和位图对象。· VisualBrush：使用 Visual 对象绘制区域。 使用 VisualBrush 可以将内容从应用程序的一个部分复制到另一个区域，这在创建反射效果和放大局部屏幕时会非常有用。接下来感受一下Shape类和Brush类的使用。1.3 直线段在平面上，两点确定一条直线段。同样在Line类中也具有两点的属性（X1，Y1） 

4、;（ X2，Y2），同时还个属性Stroke笔触，它是Brush类型的。也就是可以用上面的笔刷赋值。由于其简单性，在此不作过多的说明，可以画出下面的直线段如图1：图1下面是对应的代码，在Blend敲的话，对应的属性值提示会更加完整些，但是VS下看着比较清晰，各有优略了。XAML <Window x:Class="Chapter_10.LineTest" xmlns=" xmlns:x=" Title="LineTest" Height="300" Width="300"> <G

5、rid> <Line X1="10" Y1="20" X2="260" Y2="20" Stroke="Red" StrokeThickness="10"></Line> <Line X1="10" Y1="40" X2="260" Y2="40" Stroke="Orange" StrokeThickness="6"/&

6、gt; <Line X1="10" Y1="60" X2="260" Y2="60" Stroke="Green" StrokeThickness="3"/> <Line X1="10" Y1="80" X2="260" Y2="80" Stroke="Purple" StrokeThickness="2"/> <Line X1

7、="10" Y1="100" X2="260" Y2="100" Stroke="Black" StrokeThickness="1"/> <Line X1="10" Y1="120" X2="260" Y2="120" StrokeDashArray="3" Stroke="Black" StrokeThickness="1"

8、;/> <Line X1="10" Y1="140" X2="260" Y2="140" StrokeDashArray="5" Stroke="Black" StrokeThickness="1"/> <Line X1="10" Y1="160" X2="260" Y2="160" Stroke="Black" StrokeEndL

9、ineCap="Flat" StrokeThickness="6"/> <Line X1="10" Y1="180" X2="260" Y2="180" Stroke="Black" StrokeEndLineCap="Triangle" StrokeThickness="8"/> <Line X1="10" Y1="200" X2="260&

10、quot; Y2="200" StrokeEndLineCap="Round" StrokeThickness="10"> <Line.Stroke> <LinearGradientBrush EndPoint="0,0.5" StartPoint="1,0.5"> <GradientStop Color="Blue"/> <GradientStop Offset="1"/> </LinearGr

11、adientBrush> </Line.Stroke> </Line> </Grid></Window>1.4矩形矩形最突出的属性是长和宽，除此之外还有（Stroke）笔触、填充（Fill）属性等属性。下面看一下能画出的图形如图2已经代码：图2代码如下：XAML <Window x:Class="Chapter_10.RectangleTest" xmlns=" xmlns:x=" Title="RectangleTest" Height="390" Wi

12、dth="600"> <Grid Margin="10"> <Grid.RowDefinitions> <RowDefinition Height="160"/> <RowDefinition Height="10"/> <RowDefinition Height="160"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefini

13、tion Width="180"/> <ColumnDefinition Width="10"/> <ColumnDefinition Width="180"/> <ColumnDefinition Width="10"/> <ColumnDefinition Width="180"/> </Grid.ColumnDefinitions> <Rectangle Grid.Column="0" Grid.R

14、ow="0" Stroke="Black" Fill="LightBlue"/> <Rectangle Grid.Column="2" Grid.Row="0"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="#FFB6f8f1" Offset=&quo

15、t;0.1"/> <GradientStop Color="#FF0083bd" Offset="0.239"/> <GradientStop Color="#ddffee" Offset="0.661"/> <GradientStop Color="#eeaacc" Offset="1"/> <GradientStop Color="#FF3DA5CA" Offset="0.422&qu

16、ot;/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Grid.Column="4" Grid.Row="0"> <Rectangle.Fill> <RadialGradientBrush > <GradientStop Color="AntiqueWhite" Offset="0"/> <GradientStop Color=&qu

17、ot;Brown" Offset="0.25"/> <GradientStop Color="green" Offset="0.75"/> <GradientStop Color="red" Offset="0.75"/> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Grid.Column="0" Grid.R

18、ow="2"> <Rectangle.Fill> <ImageBrush ImageSource=".logo.png" Viewport="0,0,0.3,0.15" TileMode="Tile"/> </Rectangle.Fill> </Rectangle> <Rectangle Grid.Column="2" Grid.Row="2"> <Rectangle.Fill> <Drawi

19、ngBrush Viewport="0,0,0.2,0.2" TileMode="Tile"> <DrawingBrush.Drawing> <GeometryDrawing Brush="LightBlue"> <GeometryDrawing.Geometry> <EllipseGeometry RadiusX="10" RadiusY="10"/> </GeometryDrawing.Geometry> </Geome

20、tryDrawing> </DrawingBrush.Drawing> </DrawingBrush> </Rectangle.Fill> </Rectangle> <Rectangle Grid.Column="4" Grid.Row="2" StrokeThickness="10"> <Rectangle.Stroke> <LinearGradientBrush StartPoint="0,0" EndPoint="1

21、,1"> <GradientStop Color="White" Offset="0.3"/> <GradientStop Color="Blue" Offset="1"/> </LinearGradientBrush> </Rectangle.Stroke> </Rectangle> </Grid></Window>以上的的效果不做过多的说明，具体的可以参照msdn中矩形的的属性，链接已经给出。下面给出一个关于Vi

22、sualBrush的例子来体会一下，是怎么回事。在VisualBrush类中，有个构造函数：public VisualBrush(Visual visual);其实就是构造一个和Visual元素一样的实例，另外FrameworkElement也是继承于Visual类，那么所有的控件都可以用VisualBrush来模拟了。下面看一个简单的例子，其他的可以灵活掌握。通过点击中间的按钮，然左边的按钮的形状"放到"右边，例子的效果如图3:最下面的是通过透明度来控制的。图3下面给出主要代码：XAML <Grid x:Name="LayoutRoot">

23、 <Grid.ColumnDefinitions> <ColumnDefinition Width="160"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="160"/> </Grid.ColumnDefinitions> <StackPanel x:Name="stackPanelLeft" Background="White"> <Button x

24、:Name="realButton" Content="OK" Height="40"/> </StackPanel> <Button Content=">>>" Grid.Column="1" Margin="5,0" Click="CloneVisual"/> <StackPanel x:Name="stackPanelRight" Background="White&

25、quot; Grid.Column="2"/> </Grid>cs /定义透明度 double o = 1.0; private void CloneVisual(object sender, RoutedEventArgs e) /定义VisualBrush笔刷 VisualBrush vBrush = new VisualBrush(this.realButton); /定义一个矩形，并使其宽高和按钮的一样，让他的填充笔刷为VisualBrush,透明度慢慢的减弱 Rectangle rect = new Rectangle(); rect.Width

26、 = realButton.ActualWidth; rect.Height = realButton.ActualHeight; rect.Fill = vBrush; rect.Opacity = o; o -= 0.2; this.stackPanelRight.Children.Add(rect); 这样的话上提到的可以做反射，或者是倒影的功能是不是有些思路了，设置透明度，然后旋转就可以了，至于放大镜的实例用到了VisualBrush的ViewBox属性，详情网上查询，如果有时间我会把这个例子补出来。1.5椭圆椭圆中比较常见的是长半轴a和短半轴b,如果a=b，那么就是一个圆形。在WPF

27、中用Width和Height表示a,b其他的用法和矩形一致，下面给出一个球形的例子如图4：图4关于折线和多边形不做过多说明了，下面直接记录路径（Path）。 1.6路径 路径在绘图中是属于比较重要的一个类，他可以替换上面的几个图形工具，而且还可以画出更复杂的图像。路径不仅有Stroke，StrokeThickness等属性，还有个关键的属性Data，其类型为Geometry(几何图形)，我们就是通过这个属性来替代其他绘图类的。下面先看一组图（图5）： 图5 如果用我们上面的直线，矩形，椭圆，多边形类，可以画出上面的图。那么让我们用路径类来替代前面的几个类

28、吧。下面给出代码：XAML <Window xmlns=" xmlns:x=" x:Class="Chapter_10.PathTest" x:Name="Window" Title="PathTest" Width="340" Height="350"><Grid> <Grid.RowDefinitions> <RowDefinition Height="160"/> <RowDefinition H

29、eight="160"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="160"/> <ColumnDefinition Width="160"/> </Grid.ColumnDefinitions> <Path Stroke="Blue" StrokeThickness="2" Grid.Row="0"

30、 Grid.Column="0"> <Path.Data> <LineGeometry StartPoint="20,20" EndPoint="140,140"/> </Path.Data> </Path> <Path Stroke="Orange" Fill="Yellow" Grid.Column="1" Grid.Row="0"> <Path.Data> <Rect

31、angleGeometry Rect="20,20,120,120" RadiusX="10" RadiusY="10"/> </Path.Data> </Path> <Path Stroke="Green" Fill="LawnGreen" Grid.Row="1" Grid.Column="0"> <Path.Data> <EllipseGeometry Center="80,80&

32、quot; RadiusX="60" RadiusY="40"/> </Path.Data> </Path> <Path Stroke="Green" Fill="LawnGreen" Grid.Row="1" Grid.Column="1"> <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigure StartPoint=&q

33、uot;25,140" IsClosed="True"> <!-以上一条的终点为起点-> <LineSegment Point="20,40"/> <LineSegment Point="40,110"/> <LineSegment Point="50,20"/> <LineSegment Point="80,110"/> <LineSegment Point="110,20"/> <

34、;LineSegment Point="120,110"/> <LineSegment Point="140,40"/> <LineSegment Point="135,140"/> </PathFigure> </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path></Grid></Window>先解释一下上面的代码，由于Geometry为一个抽象类，有以下

35、几个子类：· LineGeometry：直线段几何图形· RectangleGeometry ：矩形几何图形· EllipseGeometry：椭圆几何图形· PathGeometry:路径几何图形· StreamGeometry· CombinedGeometry· GeometryGroup 上面的例子中主要用到前四种类型的几何图形类，从代码可以看出前三个和它们对应的Shape类有相似，同样可以设置属性，来改变图形的形状。第四个类，有点不大一样，主要是通过多个LineSegment（线段）组成PathFigur

36、e（图，由于图是默认属性，可以省略PathFigure标签），多个PathFigure组成PathGeometry（几何图形）。和我们平时接触的几何有点相似，几何是由图组成，图是由多个段围成的，除此之外还有一个要注意的是每个段都是上一个段的终点作为起点的。除了LineSegment，还有几个比较重要的线段ArcSegment，BezierSegment（三次贝塞尔曲线），QuadraticBezierSegment（二次贝塞尔曲线段）等，如果想了解更多线段，请点击这里。特别是贝塞尔曲线，与数学和图形联系非常紧密，在此不作说明，有机会的话，写一篇这方面的文章。上面的这种多级标签式写法看起来比较清

37、楚，但是一个路径可能是会很多行，为了方便，由于路径的特殊性（起点->绘图->闭合图形）下面还有一种简单的写法，直接用一个属性Data来表示路径。下面新看一下常用路径标记语法图6：图6下面举个例子说明一下（图7）：图7上图中，以0，0坐标开始，有三段线段，终点坐标分别为（50，30）（60,40）（70,80）最后以一个Z命令闭合。如果要组成更复杂的路径，可以参考上面的表，当然需要一些几何基础。 关于绘画的类，暂时就记录到这里吧！ 二、图形的效果与滤镜 有玩过Ps的就知道在里面有很多滤镜，使用起来方面，快捷。同样在WPF中，除了提供矢量图外，也有滤镜的功

38、能。对于UIElement类的成员有两个属性BitmapEffect和Effect，前者由于其是占用CPU来计算渲染图片的，后者是显卡在计算运算能力站主导，这样Effect就为cpu省下了资源，所以现在很多情况都是用的Effect。由于美工方面比较差劲，在此仅给出其用法，具体的根据msdn和需求来调整。先记录一下BitmapEffect，在msdn上面看到属性已经过时了，但是4.0，4.5还在可以用，下面给出其派生类：· BevelBitmapEffect：斜角效果。· BitmapEffectGroup：符合效果。· BlurBitmapEffect:模糊效果。

39、· DropShadowBitmapEffect：投影效果。· EmbossBitmapEffect：浮雕效果。· OuterGlowBitmapEffect: 外发光效果。其用法比较简单，但是使用起来就要写美工基础了下面看一个例子。标签式写法如下：<!-BlurBitmapEffect 浮雕效果-> <Image Source="美女.png" Grid.Column="0" Grid.Row="1"> <Image.BitmapEffect> <BlurBit

40、mapEffect Radius="10"/> </Image.BitmapEffect> </Image> <!-DropShadowBitmapEffect 投影效果-> <Button Width="100" Height="40" Content="哈哈" Grid.Column="0" Grid.Row="2"> <Button.BitmapEffect> <DropShadowBitmapEf

41、fect Color="red" Direction="150" /> </Button.BitmapEffect> </Button>效果如图8：图8 其他的用法都差不多，可以试着去玩一下。下面记录一下Effect。同样Effect也是UIElement的属性，其中Effect类有三个属性：· BlurEffect 模糊效果· DropShadowEffect 投影效果· ShaderEffect 着色器效果（抽象类）看了之后，有什么感想呢，怎么比BitmapEffect还少呢，但是

42、有个抽象类，抽象类就是用来继承的，可以自己去写。想写多少种写多少种，关于前两种的效果使用方法和BitmapEffect的一样,主要说明一下抽象类，网上有很多写好的着色器的继承类，可以供我们使用。我在网上下载了一个WPFShaderEffectLibrary，在项目中先添加现有项，然后添加引用，之后我们就可以像模糊效果，投影效果一样的使用里面有重写的类了（本记录的练习代码我会在文章的最后提供下载），有个地方要注意的是，使用的时间要下加命名空间xmlns:selid="clr-namespace:ShaderEffectLibrary;assembly=ShaderEffectLibra

43、ry"。 <Image Source="美女.png" Margin="15" Grid.Column="2"> <Image.Effect> <selid:ZoomBlurEffect Center="0.5,0.5" BlurAmount="0.2"/> </Image.Effect> </Image> <Image Source="美女.png" Margin="15" Gr

44、id.Column="1"> <Image.Effect> <selid:LightStreakEffect Attenuation="10" BrightThreshold="1" Scale="2"/> </Image.Effect> </Image>看一下效果如图9： 图9怎么样呢？激动了吧！O(_)O。赶紧去下载源码，悄悄她长得怎么样。好了,关键是记住使用的格式记住，其他的就要靠需求来使用滤镜了，好了，关于绘图的记录这个就到这里吧！下面进入图形的变形与动画。三、图形的变形与其说是变形，不如说是变化，因为在WPF中的变形，不仅包括拉长，挤扁、放大