WPF图形绘制教程

本篇将记录一下如何在WPF中绘画和设计动画，这方面一直都不是VS的强项，然而它有一套利器Blend；这方面也不是我的优势，幸好我有博客园，能记录一下学习的过程。在本记录中，为了更好的理解绘画与动画，多数的例子还是在VS里面敲出来的。好了，不废话了，现在开始。一、WPF绘画1.1基本图形在WPF中可以绘制矢量图，不会随窗口或图型的放大或缩小出现锯齿或变形，除此之外，XAML绘制出来的图有个好处就是便于修改，当图不符合要求的时间，通常改某些属性就可以完成了。下面先记录一下几个基本的图形（他们都派生于Shape类）。Line直线段Rectangle矩形Ellipse椭圆Polygon多边形Polyline折线，不闭合Path路径1.2笔刷常用的笔刷Brush类型有：·SolidColorBrush：使用纯Color绘制区域。·LinearGradientBrush：使用线性渐变绘制区域。其中有个GradientStop属性，径向渐变也有可以查看msdn，我觉得上面说的还是比较清楚的。·RadialGradientBrush：使用径向渐变绘制区域。·ImageBrush：使用图像（由ImageSource对象表示）绘制区域。·DrawingBrush：使用Drawing绘制区域。绘图可能包含向量和位图对象。·VisualBrush：使用Visual对象绘制区域。使用VisualBrush可以将内容从应用程序的一个部分复制到另一个区域，这在创建反射效果和放大局部屏幕时会非常有用。接下来感受一下Shape类和Brush类的使用。1.3直线段在平面上，两点确定一条直线段。同样在Line类中也具有两点的属性（X1，Y1）（X2，Y2），同时还个属性Stroke——笔触，它是Brush类型的。也就是可以用上面的笔刷赋值。由于其简单性，在此不作过多的说明，可以画出下面的直线段如图1：图1下面是对应的代码，在Blend敲的话，对应的属性值提示会更加完整些，但是VS下看着比较清晰，各有优略了。XAMLWindowx:Class=Chapter_10.LineTestxmlns=:x==LineTestHeight=300Width=300GridLineX1=10Y1=20X2=260Y2=20Stroke=RedStrokeThickness=10/LineLineX1=10Y1=40X2=260Y2=40Stroke=OrangeStrokeThickness=6/LineX1=10Y1=60X2=260Y2=60Stroke=GreenStrokeThickness=3/LineX1=10Y1=80X2=260Y2=80Stroke=PurpleStrokeThickness=2/LineX1=10Y1=100X2=260Y2=100Stroke=BlackStrokeThickness=1/LineX1=10Y1=120X2=260Y2=120StrokeDashArray=3Stroke=BlackStrokeThickness=1/LineX1=10Y1=140X2=260Y2=140StrokeDashArray=5Stroke=BlackStrokeThickness=1/LineX1=10Y1=160X2=260Y2=160Stroke=BlackStrokeEndLineCap=FlatStrokeThickness=6/LineX1=10Y1=180X2=260Y2=180Stroke=BlackStrokeEndLineCap=TriangleStrokeThickness=8/LineX1=10Y1=200X2=260Y2=200StrokeEndLineCap=RoundStrokeThickness=10Line.StrokeLinearGradientBrushEndPoint=0,0.5StartPoint=1,0.5GradientStopColor=Blue/GradientStopOffset=1//LinearGradientBrush/Line.Stroke/Line/Grid/Window1.4矩形矩形最突出的属性是长和宽，除此之外还有（Stroke）笔触、填充（Fill）属性等属性。下面看一下能画出的图形如图2已经代码：图2代码如下：XAMLWindowx:Class=Chapter_10.RectangleTestxmlns=:x==RectangleTestHeight=390Width=600GridMargin=10Grid.RowDefinitionsRowDefinitionHeight=160/RowDefinitionHeight=10/RowDefinitionHeight=160//Grid.RowDefinitionsGrid.ColumnDefinitionsColumnDefinitionWidth=180/ColumnDefinitionWidth=10/ColumnDefinitionWidth=180/ColumnDefinitionWidth=10/ColumnDefinitionWidth=180//Grid.ColumnDefinitionsRectangleGrid.Column=0Grid.Row=0Stroke=BlackFill=LightBlue/RectangleGrid.Column=2Grid.Row=0Rectangle.FillLinearGradientBrushStartPoint=0,0EndPoint=1,1GradientStopColor=#FFB6f8f1Offset=0.1/GradientStopColor=#FF0083bdOffset=0.239/GradientStopColor=#ddffeeOffset=0.661/GradientStopColor=#eeaaccOffset=1/GradientStopColor=#FF3DA5CAOffset=0.422//LinearGradientBrush/Rectangle.Fill/RectangleRectangleGrid.Column=4Grid.Row=0Rectangle.FillRadialGradientBrushGradientStopColor=AntiqueWhiteOffset=0/GradientStopColor=BrownOffset=0.25/GradientStopColor=greenOffset=0.75/GradientStopColor=redOffset=0.75//RadialGradientBrush/Rectangle.Fill/RectangleRectangleGrid.Column=0Grid.Row=2Rectangle.FillImageBrushImageSource=.\logo.pngViewport=0,0,0.3,0.15TileMode=Tile//Rectangle.Fill/RectangleRectangleGrid.Column=2Grid.Row=2Rectangle.FillDrawingBrushViewport=0,0,0.2,0.2TileMode=TileDrawingBrush.DrawingGeometryDrawingBrush=LightBlueGeometryDrawing.GeometryEllipseGeometryRadiusX=10RadiusY=10//GeometryDrawing.Geometry/GeometryDrawing/DrawingBrush.Drawing/DrawingBrush/Rectangle.Fill/RectangleRectangleGrid.Column=4Grid.Row=2StrokeThickness=10Rectangle.StrokeLinearGradientBrushStartPoint=0,0EndPoint=1,1GradientStopColor=WhiteOffset=0.3/GradientStopColor=BlueOffset=1//LinearGradientBrush/Rectangle.Stroke/Rectangle/Grid/Window以上的的效果不做过多的说明，具体的可以参照msdn中矩形的的属性，链接已经给出。下面给出一个关于VisualBrush的例子来体会一下，是怎么回事。在VisualBrush类中，有个构造函数：publicVisualBrush(Visualvisual);其实就是构造一个和Visual元素一样的实例，另外FrameworkElement也是继承于Visual类，那么所有的控件都可以用VisualBrush来模拟了。下面看一个简单的例子，其他的可以灵活掌握。通过点击中间的按钮，然左边的按钮的形状放到右边，例子的效果如图3:最下面的是通过透明度来控制的。图3下面给出主要代码：XAMLGridx:Name=LayoutRootGrid.ColumnDefinitionsColumnDefinitionWidth=160/ColumnDefinitionWidth=*/ColumnDefinitionWidth=160//Grid.ColumnDefinitionsStackPanelx:Name=stackPanelLeftBackground=WhiteButtonx:Name=realButtonContent=OKHeight=40//StackPanelButtonContent=Grid.Column=1Margin=5,0Click=CloneVisual/StackPanelx:Name=stackPanelRightBackground=WhiteGrid.Column=2//Gridcs//定义透明度doubleo=1.0;privatevoidCloneVisual(objectsender,RoutedEventArgse){//定义VisualBrush笔刷VisualBrushvBrush=newVisualBrush(this.realButton);//定义一个矩形，并使其宽高和按钮的一样，让他的填充笔刷为VisualBrush,透明度慢慢的减弱Rectanglerect=newRectangle();rect.Width=realButton.ActualWidth;rect.Height=realButton.ActualHeight;rect.Fill=vBrush;rect.Opacity=o;o-=0.2;this.stackPanelRight.Children.Add(rect);}这样的话上提到的可以做反射，或者是倒影的功能是不是有些思路了，设置透明度，然后旋转就可以了，至于