WPF图形绘制教程

2024年2月8日发(作者：)

本篇将记录一下如何在WPF中绘画和设计动画，这方面一直都不是VS的强项，然而它有一套利器Blend；这方面也不是我的优势，幸好我有博客园，能记录一下学习的过程。在本记录中，为了更好的理解绘画与动画，多数的例子还是在VS里面敲出来的。好了，不废话了，现在开始。

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下看着比较清晰，各有优略了。

XAML

xmlns="/winfx/2006/xaml/presentation"

xmlns:x="/winfx/2006/xaml"

Title="LineTest" Height="300" Width="300">

StrokeThickness="1"/>

StrokeThickness="1"/>

StrokeThickness="6"/>

StrokeThickness="8"/>

<>

1.4矩形

矩形最突出的属性是长和宽，除此之外还有（Stroke）笔触、填充（Fill）属性等属性。下面看一下能画出的图形如图2已经代码：

图2

代码如下：

XAML

xmlns="/winfx/2006/xaml/presentation"

xmlns:x="/winfx/2006/xaml"

Title="RectangleTest" Height="390" Width="600">

<>

<>

<>

<>

<>

以上的的效果不做过多的说明，具体的可以参照msdn中矩形的的属性，链接已经给出。下面给出一个关于VisualBrush的例子来体会一下，是怎么回事。在VisualBrush类中，有个构造函数：public VisualBrush(Visual visual);其实就是构造一个和Visual元素一样的实例，另外FrameworkElement也是继承于Visual类，那么所有的控件都可以用VisualBrush来模拟了。下面看一个简单的例子，其他的可以灵活掌握。通过点击中间的按钮，然左边的按钮的形状"放到"右边，例子的效果如图3:最下面的是通过透明度来控制的。

图3

下面给出主要代码：

XAML

cs

//定义透明度

double o = 1.0;

private void CloneVisual(object sender, RoutedEventArgs e)

{

//定义VisualBrush笔刷

VisualBrush vBrush = new VisualBrush(tton);

//定义一个矩形，并使其宽高和按钮的一样，让他的填充笔刷为VisualBrush,透明度慢慢的减弱

Rectangle rect = new Rectangle();

= Width;

= Height;

= vBrush;

y = o;

o -= 0.2;

(rect);

}

这样的话上提到的可以做反射，或者是倒影的功能是不是有些思路了，设置透明度，然后旋转就可以了，至于放大镜的实例用到了VisualBrush的ViewBox属性，详情网上查询，如果有时间我会把这个例子补出来。

1.5椭圆

椭圆中比较常见的是长半轴a和短半轴b,如果a=b，那么就是一个圆形。在WPF中用Width和Height表示a,b其他的用法和矩形一致，下面给出一个球形的例子如图4：

图4

关于折线和多边形不做过多说明了，下面直接记录路径（Path）。

1.6路径

路径在绘图中是属于比较重要的一个类，他可以替换上面的几个图形工具，而且还可以画出更复杂的图像。路径不仅有Stroke，StrokeThickness等属性，还有个关键的属性——Data，其类型为Geometry(几何图形)，我们就是通过这个属性来替代其他绘图类的。下面先看一组图（图5）：

图5

如果用我们上面的直线，矩形，椭圆，多边形类，可以画出上面的图。那么让我们用路径类来替代前面的几个类吧。下面给出代码：

XAML

xmlns="/winfx/2006/xaml/presentation"

xmlns:x="/winfx/2006/xaml"

x:Class="Chapter_st"

x:Name="Window"

Title="PathTest"

Width="340" Height="350">

<>

<>

<>

<>

先解释一下上面的代码，由于Geometry为一个抽象类，有以下几个子类：

•

•

•

LineGeometry：直线段几何图形

RectangleGeometry ：矩形几何图形

EllipseGeometry：椭圆几何图形

•

•

•

•

PathGeometry:路径几何图形

StreamGeometry

CombinedGeometry

GeometryGroup

上面的例子中主要用到前四种类型的几何图形类，从代码可以看出前三个和它们对应的Shape类有相似，同样可以设置属性，来改变图形的形状。第四个类，有点不大一样，主要是通过多个LineSegment（线段）组成PathFigure（图，由于图是默认属性，可以省略PathFigure标签），多个PathFigure组成PathGeometry（几何图形）。和我们平时接触的几何有点相似，几何是由图组成，图是由多个段围成的，除此之外还有一个要注意的是每个段都是上一个段的终点作为起点的。除了LineSegment，还有几个比较重要的线段ArcSegment，BezierSegment（三次贝塞尔曲线），QuadraticBezierSegment（二次贝塞尔曲线段）等，如果想了解更多线段，请点击这里。特别是贝塞尔曲线，与数学和图形联系非常紧密，在此不作说明，有机会的话，写一篇这方面的文章。

上面的这种多级标签式写法看起来比较清楚，但是一个路径可能是会很多行，为了方便，由于路径的特殊性（起点->绘图->闭合图形）下面还有一种简单的写法，直接用一个属性Data来表示路径。下面新看一下常用路径标记语法图6：

图6

下面举个例子说明一下（图7）：

图7

上图中，以0，0坐标开始，有三段线段，终点坐标分别为（50，30）（60,40）（70,80）最后以一个Z命令闭合。如果要组成更复杂的路径，可以参考上面的表，当然需要一些几何基础。 关于绘画的类，暂时就记录到这里吧！

二、图形的效果与滤镜

有玩过Ps的就知道在里面有很多滤镜，使用起来方面，快捷。同样在WPF中，除了提供矢量图外，也有滤镜的功能。对于UIElement类的成员有两个属性BitmapEffect和Effect，前者由于其是占用CPU来计算渲染图片的，后者是显卡在计算运算能力站主导，这样Effect就为cpu省下了资源，所以现在很多情况都是用的Effect。由于美工方面比较差劲，在此仅给出其用法，具体的根据msdn和需求来调整。

先记录一下BitmapEffect，在msdn上面看到属性已经过时了，但是4.0，4.5还在可以用，下面给出其派生类：

•

•

•

•

•

•

BevelBitmapEffect：斜角效果。

BitmapEffectGroup：符合效果。

BlurBitmapEffect:模糊效果。

DropShadowBitmapEffect：投影效果。

EmbossBitmapEffect：浮雕效果。

OuterGlowBitmapEffect: 外发光效果。

其用法比较简单，但是使用起来就要写美工基础了下面看一个例子。标签式写法如下：

效果如图8：

图8

其他的用法都差不多，可以试着去玩一下。下面记录一下Effect。同样Effect也是UIElement的属性，其中Effect类有三个属性：

•

•

•

BlurEffect 模糊效果

DropShadowEffect 投影效果

ShaderEffect 着色器效果（抽象类）

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

<>

<>

看一下效果如图9：

图9

怎么样呢？激动了吧！O(∩_∩)O~。赶紧去下载源码，悄悄她长得怎么样。好了,关键是记住使用的格式记住，其他的就要靠需求来使用滤镜了，好了，关于绘图的记录这个就到这里吧！下面进入图形的变形与动画。

三、图形的变形

与其说是变形，不如说是变化，因为在WPF中的变形，不仅包括拉长，挤扁、放大、缩小等，还包括尺寸、位置、坐标比例、旋转角度等的变化。控制变形的属性有两个：

1.

2.

RenderTransform：呈现变形，定义在UIElement类中。

LayoutTransform：布局变形，定义在FrameworkElement类中。

由于FrameworkElement类派生于UIelement类，而控件的基类Control类又派生于FrameworkElement类，所以说FrameworkElement类有两个属性。除此之外，还要知道上面的两个属性都是依赖属性，他们的类型为Transform 抽象类，此抽象类派生的类型有下面几个：

•

•

•

•

•

•

MatrixTransform：矩阵变形

RotateTransform：旋转变形

ScaleTransform：坐标变形

SkewTransform：拉伸变形

TranslateTransform：偏移变形

TransformGroup：变形组

下面来对比一下RenderTransform和LayoutTransform的区别。RenderTransform是不牵扯到布局的改变，只涉及到窗体的重绘。如果不理解的话，我们就从一个例子看一下。我在一个Grid上面，把Grid分为两列，其中第一列为自适应高度，后面的一列为剩余的部分，然后在第一列中放一个TextBlock，分别用两种变形来实现。 代码已经给出，如下：

VerticalAlignment="Bottom">

我们看一下其效果如图10：

图10

布局变形，真的是会布局会发生改变。呈现变形，只负责本身的形状，不管布局。所以如果是动画制作的话，如涉及到变形的话，应该使用RenderTransform。本记录重点是动画，所以还是看看呈现变形在动画里面是怎么表现的。