《深入浅出WPF》笔记——绘画与动画

haiziguo

<div id="cnblogs_post_body">　　本篇将记录一下如何在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下看着比较清晰，各有优略了。
<div class="cnblogs_code" >XAML<div id="cnblogs_code_open_4c4f4110-34cf-400e-9a3c-c896aad5e353" class="cnblogs_code_hide"><Window x:Class="Chapter_10.LineTest"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="LineTest" Height="300" Width="300">    <Grid>        <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"/>        <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="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"/>        <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" StrokeEndLineCap="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" Y2="200" StrokeEndLineCap="Round" StrokeThickness="10">            <Line.Stroke>                <LinearGradientBrush EndPoint="0,0.5" StartPoint="1,0.5">                    <GradientStop Color="Blue"/>                    <GradientStop Offset="1"/>                </LinearGradientBrush>            </Line.Stroke>        </Line>    </Grid></Window>