C#WPF XAML 绘图、画笔、特效

C#WPF XAML 绘图、画笔、特效

一、绘图
I.绘图有两种方式：形状绘图和几何绘图。
1.(1）、形状(Shape)是一个2D绘图类，位于System.Windows.Shape空间内。
2.包含最常用的绘图对象:Line（直线）、Rectangle（矩形）、Ellipse（椭圆）、Polygon（多边形）、Path（路径）。
（1）、图形对象共有属性:Stroke（如何使用绘制图形的轮廓，既所使用的画刷）、StrokeThickness（图形轮廓的粗细）、Fill（绘制图形的内部）。
（2）、指定图形的坐标位置和顶点的数据属性，以与设备无关的像素来度量。

（3）、直线是最简单的图形。使用X1、Y1两个属性可以设置它的起点坐标，X2、Y2两个属性则用来设置其终点坐标。控制起点/终点坐标就可以实现平行、交错等效果。
（4）、Stroke（笔触）属性的数据类型是Brush(画刷)，凡是Brush的派生类均可用于给这个属性赋值。因为WPF提供了多种渐变色画刷，所以画直线也可以画出渐变效果。同时，Line 的一些属性还帮助我们画出虚线以及控制线段终点的形状。下面的例子综合了这些属性。
（5）、Y2控制向左倾斜，Y1控制向右倾斜，“StrokeDashArray”控制虚线密度，StrokeEndLineCap直线结束形状与StrokeStartLineCap直线开始形状:Flat(矩形)、Round（圆形）、Square（矩形）、Triangle（尖头形状）。

3.Rectangle（矩形）
（1）、矩形由笔触（Stroke，即边线）和填充（Fill）构成。Stroke属性的设置与Lin一
样,Fill属性的数据类型是Brush。Brush是个抽象类，所以我们不可能拿一个Brush类的实例为Fill属性赋值而只能用Brush派生类的实例进行赋值。WPF的绘图系统包含非常丰富的Brush类型。
（2）、SolidColorBrush：实心画刷。在XAML中可以使用颜色名称字符串（如Red、Blue）
直接赋值。
（3）、RadiusX="30"和RadiusY="100"是设置圆角效果。

（4）、LinearGradientBrush：线性渐变画刷。色彩沿设定的直线方向、按设定的变化点进
行渐变。
（5）、RadialGradientBrush：径向渐变画刷。色彩沿半径的方向、按设定的变化点进行渐
变，形成圆形填充。
（6）、 线性渐变:StartPoint=“0,0” EndPoint="1,1"起点为左上角终点为右下角，
（0,0 1,0）起点为左上角终点为左下角、（0,0 1,0,5）起点为左上角终点为右边一半。

（7）、ImageBrush：使用图片（Image）作为填充内容。
（8）、DrawingBrush：使用矢量图（Vector）和位图（Bitmap）作为填充内容。
Viewport：设置平铺的范围、TileMode：设置平铺的方式（Absolute绝对平铺、RelativeToBoundingBox相对平铺）。
（9）、ViewportUnits：设置平铺的相对/绝对坐标，即图片在哪平铺，Viewport=“0, 0, 0.5, 0.5” 表示要平铺图片在矩形框的位置，(0,0）代表起点坐标，（0.5,0.5）代表重点坐标。
（10）、VisualBrush：WPF中的每个控件都是由FrameworkElement类派生来的，而
（11）、FrameworkElement又是由Visual类的方法获得。获得这个可视化的形象后，我们可以用这个形象进行填充，这就是VisualBrush。比如当我想把窗体上的某个控件拖拽
到另一个位置，当鼠标松开之前需要在鼠标指针下显示一个控件的“幻影”，这个“幻
影”就是用VisualBrush填充出来的一个矩形，并让矩形捕捉鼠标的位置、随鼠标移动。

3.Ellipse（椭圆）
椭圆也是一种常见的几何图形，它的使用方法与矩形没有什么区别。下面的例子是绘
制一个球体，球体的轮廓是正圆（Circle）,Width与Height相等的椭圆即是正圆；球体的
光影效果使用径向渐变实现。

4.Polygon（多边形）
使用“Polygon”定义多边形，多边形是一个闭合体，“Points”属性设置边前面数值要和后面的数值保持一致才能形成闭合体。

使用“Polyline”定义多线形，多线形不是闭合体，

5.Path（路径）
（1）、Path类可以绘制曲线和复杂的形状。
（2）、Data属性使用了mini-language（路径标记语法）。
（3）、路径（Path）可以说是WPF绘图中最强大的工具，一来是因为它完全可以替代其他
几种图形，二来它可以将直线、圆弧、贝斯二曲线等基本元素结合进来，形成更复杂的
图形。路径最重要的一个属性是Data,Data的数据类型是Geometry（几何图形），我们
正是使用这个属性将一些基本的线段拼接起来、形成复杂的图形。
（4）、为Data属性赋值的语法有两种：一种是标签式的标准语法，另一种是专门用户绘制几何图形的“路径标记语法”。借助标准语法认识各种基本线段，和学习绘制几何图形的路径标记语法。
（5）、想要使用Path绘制图形，首先要知道几何图形数据是如何组合在Data属性中的。Path的Data属性是Geometry类，但Geometry类是个抽象类，所以我们不可能在XAML中直接使用标签。
（6）、我们可以使用的是Geometry的子类。Geometry子类包括：
LineGeometry：直线几何图形。
RectangleGeometry：矩形几何图形。
EllipseGeometry：椭圆几何图形。
PathGeometry：路径几何图形。
StreamGeometry：PathGeometry的轻量级替代品，不支持Binding、动画等功能。
CombinedGeometry：由多个基本几何图形联合在一起，形成的单一几何图形。
GeometryGruop：由多个基本几何图形组成在一起，形成的几何图形组。
II.几何绘图
1.（1）、几何绘图与图形绘图的区别:图形对象可以独立存在的，可以独立绘制出具体需要的图形、几何图形对象没有具体的形体，它需要依赖于某一对象元素而存在，不能直接呈现在画板上。
（2）、几何绘图包括5种对象:LineGeometry（确定两点绘制一条直线）、RectangleGeometry（绘制矩形的几何图形）、EllipseGeometry（绘制椭圆形的几何图形）、GeometryGroup（组合几何对象，将多个单一的几何对象组合成一个几何对象）、PathGeometry（路径几何对象）。
（3）、LineGeometry（确定两点绘制一条直线），StartPoint（起点）EndPoint（终点）。

（4）、RectangleGeometry（绘制矩形的几何图形），RadiusX（控制圆角） RadiusY（控制圆形）。

（5）、EllipseGeometry（绘制椭圆形的几何图形），RadiusX（控制垂直方向）RadiusY（控制水平方向）。

2.、Path可以用这些形状绘制:
（1）、ArcSegment 类 表示两点之间的一条椭圆弧，用来绘制圆弧的五个属性。
①．Point属性用来指明圆弧连接的终点；
②．圆弧截取自椭圆，Size属性即是完整椭圆的横轴半径和纵轴半径；
③．SweepDirection属性指明圆弧是顺时针方向还是逆时针方向；如果椭圆上的两点位置不对称，那么这两点的圆弧就会分为大弧和小弧，IsLargeArc 属性用于指明是否使用大弧去连接；
④．RotationAngle属性用来指明圆弧母椭圆的旋转角度。
(2）、BezierSegment（三次方贝塞尔曲线)类表示在两个点之间绘制的一条三次贝塞尔曲线，由4个点决定：
①．起点：即前一个线段的终点或PathFigure的StartPoint。
②．终点：Point3属性，即曲线的终点位置。
③．两个控制点：Point1和Point2属性。
④．三次方贝塞尔曲线就是由起点出发走向Point1的方向，再走向Point2的方
向，最后到达终点的平滑曲线。

（3）、LineSegment 类 在PathFigure中的两个点之间创建一条直线。

（4）、PolyBezierSegment 类 表示一条或多条三次方贝塞尔曲线。
（5）、PolyLineSegment 类 表示由PointCollection 定义的线段集合，每个Point指
线段的终点。
（6）、PolyQuadraticBezierSegment 类 表示一系列二次贝塞尔线段。
（7）、QuadraticBezierSegment（二次贝塞尔曲线段)类，在PathFigure的两点之间创建一条二次贝塞尔曲线，与BezierSegment类似，只是控制点由两个减少为一个。也就是说，QuadraticBezierSegment 由三个点决定：
①．起点：即前一个线段的终点或PathFigure的StartPoint。
②．终点：Point2属性，即曲线的终点位置。
③．一个控制点：Point1。

（8）、GeometryGruop也是Geometry的一个派生类，它最大的特点是可以将一组PathGeometry组合在一起。
（9）、 缺点:其标签式语法的烦琐，一般情况下，复杂图形（Path）都是由数十条线段
连接而成，按照标签式语法，每条线段（Segment）是一个标签、每个标签占据一行，
一个图形就要占去几十行代码，而这仅仅是一个图形，要组成一个完整的图画往往需要
十多个图形组合在一起，有可能占据数百行代码，借助专供WPF绘图使用的路径标记语法（Path Markup Syntax）来极大地简化Path的描述。

III、路径标记语法 （Path Markup Syntax）
1.移动命令:指定startPoint（绘图的起始点）,用“M”或“m”表示，使用M时,表示绝对值，使用m时，表示相当于前一定的偏移值。
2.绘制命令：一个指令集合,用来描述外形轮廓的内容，包含大部分的直线和曲线的绘图指令，包括L、H、V、A、C、Q等。
3.关闭命令:作用是结束当前的画图，用来闭合整个Path，并在当前点和图形的起点之间画一条线段，使用字母“z”来表示，最后一条线段的终点与第一条线段的起点间会连接上一条直线段。
4.线段的简记法:可以简写为“L 150,5”,这个L就是路径标记语法的一个“绘图命令”，“H 180”就是指从当前点画一条水平直线，终点的横坐标是180（你不需要考虑纵坐标，它与当前点的纵坐标一 致）。类似地还有V命令，用来画竖直直线。
5.使用“Visual Studio 2015”自带的设计器“Blend for Visual Studio 2015”Path命令绘制自己喜欢的图形。

（1）、打开“Blend for Visual Studio 2015”新建WPF应用程序，创建的项目和WPF窗口基本一致，“对象和时间线”窗口是实时显示页面控件层级的窗口。

（2）、进行绘图，如果想要绘图自己喜欢的人物图形但又不会画的时候，可以选择把想要的图片设置为背景图片，然后使用画笔对着图片绘制，其中“笔”是绘制直线的，“铅笔”是绘制曲线的。

二、画笔
I、画刷（使用Blend for Visual Studio 2015）
1.画刷定义:
（1）、所有的UI元素都可以通过画刷的设置而改变它们的风格。
（2）、使用不同的画刷对目标区域进行“绘制”，会有不同的效果。
（3）、种类:SolidColorBrush（单色实心画刷）、LinearGradientBrush（线性渐变画刷）、RadialGradientBrush（径向渐变画刷Win8应用中不支持）、ImageBrush（图片画刷）。

2.（1）、SolidColorBrush（单色实心画刷）SolidColorBrush使用纯色绘制区域 Color 。可以通过多种方式指定的 Color ，SolidColorBrush ：例如，可以指定其 alpha、红色、蓝色和绿色通道，或使用类提供的预定义颜色之一 Colors 。
①．后台写法，实际上就是给“Grid”设置一个“Children”属性。


（2）、LinearGradientBrush（线性渐变画刷）LinearGradientBrush使用线性渐变绘制区域。 线性渐变在线条（渐变轴）中混合了两种或多种颜色。 使用 GradientStop 对象可以指定渐变中的颜色及其位置。
（3）、RadialGradientBrush（径向渐变画刷Win8应用中不支持）RadialGradientBrush使用径向渐变绘制区域。 径向渐变跨一个圆混合两种或多种颜色，与类一样 LinearGradientBrush ，可以使用 GradientStop 对象指定渐变中的颜色及其位置。
（4）、ImageBrush（图片画刷）ImageBrush使用绘制区域 ImageSource 。
①．如果直接引用资源管理器里的图片文件夹的时候会报错，因为系统引用的是整个项目的文件夹，所以需要把图片文件夹放在项目文件夹bin–>Debug里才能引用。

三、图像处理
1.图像处理三种属性:拉伸图像（通过设置Stretch属性实现图像的拉伸）、裁切图像（通过设置Clip属性裁切图像）、使用图像输入文字（ImageBrush）元素实现使用图像输入文字。
（1）、Imdge元素的Stretch属性值类型为枚举型，属性值分别为:原始尺寸（None）、填充拉伸（Fill）、等比拉伸（Uniform）、等比拉伸填充（UniformToFill）。

（2）、裁切图像（通过设置Clip属性裁切图像），Width和Height值越大裁切的内容越小。

（3）、使用图像输入文字（ImageBrush）元素实现使用图像输入文字。FontStyle设置字体样式有三个属性:Italic（字体倾斜）、Normal（字体正常）、Oblique（字体倾斜）。

（4）、Opacity设置图片的透明度/毛玻璃效果。

四、RenderTransform特效（变形）
I、 RenderTransform类：包含的变形属性成员，专门用来改变Silverlight对象形状的实现对元素拉伸、旋转、扭曲等效果，同时变形特效也常用于辅助产生各种动画效果。
1.RenderTransform类：
（1）、TranslateTransform：能够让某对象的位置发生平移变化。
（2）、RotateTransform：能够让某对象产生旋转变化，根据中心点进行顺时针旋转或逆时针旋转。
（3）、ScaleTransform：能够让某对象产生缩放变化。
（4）、SkewTransform：能够让某对象产生扭曲(斜角)变化。
（5）、TransformGroup：变换集合,能够让某对象的缩放、旋转、扭曲等变化效果合并起来使用(组合多个变换)。
（6）、MatrixTransform：能够让某对象通过矩阵算法实现更为复杂的变形。
变形元素包括平移变形、旋转变形、缩放变形、扭曲变形、矩阵变形和组合变形元素，
变形特效常用于在不改变对象本身构成的情况下，使对象产生变形效果，所以变形元素
常辅助产生Silverlight中的各种动画效果。
2.（1）、 TranslateTransform（平移变化），包含X、Y 两种属性，以原来的对象为坐标原点(0,0),然后向X轴、Y轴进行平移变换。

（2）、RotateTransform（(旋转变化），包括属性Angle（旋转角度），CenterX、CenterY（旋转的中心)，负数为逆时针旋转，正数为顺时针旋转。

（3）、ScaleTransform：能够让某对象产生缩放变化，包括属性ScaleX、ScaleY、CenterX、CenterY，其中ScaleX、ScaleY属性表示对象在X、Y轴进行缩放的倍数，使用CenterX 和 CenterY属性指定一个中心点，ScaleX控制的是水平方向的缩放，ScaleY控制的是垂直方向的缩放。

（4）、SkewTransform：能够让某对象产生扭曲(斜角)变化，包括属性AngleX、AngleY、CenterX、CenterY。其中使用AngleX让元素相对X轴倾斜角度，AngleY是让元素围绕Y轴的倾斜角度。同样CenterX和CenterY是中心点位置。

（5）、TransformGroup：变换集合,能够让某对象的缩放、旋转、扭曲等变化效果合并起来使用(组合多个变换)，类似于在控件布局中的StackPanel内嵌的作用，是把多种变化元素组合成一种变化的容器。
2.（1）、MatrixTransform是通过一种矩阵算法来进行运算得到相应的变形的效果的，在二维 x-y 平面中，使用3x3 矩阵进行变换，矩阵中第三列的值是固定不变的！最后一行中的成员 OffsetX OffsetY 表示转换值。方法和属性通常将变换矩阵指定为只有六个成员的矢量;成员如下：(M11, M12, M21, M22, OffsetX, OffsetY)。
（2）、M11表示第一行第一列，m11：第一行和第一列相交处的值 Matrix,默认值为 1、M12：第一行和第二列相交处的值 Matrix,默认值为 0、M21：第二行和第一列相交处的值 Matrix,默认值为 0/M22：第二行和第二列相交处的值 Matrix,默认值为 1、offsetX：第三行和第一列相交处的值 Matrix,默认值为 0、offsetY：第三行和第二列相交处的值 Matrix,默认值为 0、以上六个属性值都是System.Double类型。