windows phone 绘制图形操作

一、GeometryGroup 类:表示复合几何图形对象

可以使用 GeometryGroup 创建复合几何图形对象。 GeometryGroup 对象创建它所包含的 Geometry 对象的组合体，但不合并其面积。 可以向 GeometryGroup 中添加任意数量的 Geometry 对象。 下面的示例使用 GeometryGroup 创建复合几何图形。

XAML

<Canvas>
  <Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
    <Path.Data>

      <!-- Creates a composite shape from three geometries. -->
      <GeometryGroup FillRule="EvenOdd">
        <LineGeometry StartPoint="10,10" EndPoint="50,30" />
        <EllipseGeometry Center="40,70" RadiusX="30" RadiusY="30" />
        <RectangleGeometry Rect="30,55 100 30" />
      </GeometryGroup>
    </Path.Data>
  </Path>
</Canvas>

下图显示此示例的输出。

复合几何图形

二、LineGeometry 类:表示线条的几何图形。

转自：WPF入门(三)->几何图形之线条(LINEGEOMETRY)

　下面我们来看一段代码

< Window  x:Class ="WPF.SimpleGraph.Line"
        xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
        Title ="Line"  Height ="300"  Width ="300" >
     < Canvas  Height ="157"  Width ="147" >
         < Path  Stroke ="Red"  StrokeThickness ="5" >
             < Path.Data >
                 < LineGeometry  StartPoint ="20,20"  EndPoint ="50,100" ></ LineGeometry >
             </ Path.Data >
         </ Path >
     </ Canvas >
</ Window >

执行结果：

　　在该代码中，首先Window元素表示该程序是一个windows应用程序

　　Canvas元素表示一个区域，在该区域中可以使用相对于 Canvas 区域的坐标显式定位子元素，我们可以把它看成一个类似于div的容器。

　　Path 对象可以绘制闭合或开放的形状、多个形状，甚至曲线形状，我们可以使用它来绘制一系列相互连接的直线和曲线，Stroke表示该图形的颜色，StrokeThickNess表示图形的粗细。

　　Path.Data是Path的一个属性，它表示我们要在该Path里面绘制如何形状的图形。

　　LineGeometry表示一个线性的几何图形，表示一根线条，StartPoint表示线条的开始端点的位置，EndPoint表示线条结束端点的位置。

三、EllipseGeometry类： 表示圆或椭圆的几何图形。

转自：WPF入门(三)->几何图形之椭圆形(ELLIPSEGEOMETRY)

我们可以使用EllipseGeometry 来绘制一个椭圆或者圆形的图形

下面来看一段代码：

< Window  x:Class ="WPF.SimpleGraph.Ellipse"
        xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
        Title ="Ellipse"  Height ="300"  Width ="300" >
     < Canvas >
         < Path  Stroke ="Red"  StrokeThickness ="5" >
             < Path.Data >
                 < EllipseGeometry  Center ="100,100"  RadiusX ="50"  RadiusY ="30" ></ EllipseGeometry >
             </ Path.Data >
         </ Path >
     </ Canvas >
</ Window >

 该代码执行的结果是：

其中EllipseGeometry表示一个椭圆形的几何图形，Center表示该图形的中心圆点在100,100这个坐标上，RadiusX表示横轴半径，RadiusY表示纵轴半径

 

顾名思义，如果我们想要绘制一个圆形，只需要将横轴半径与纵轴半径值设为一样即可。

< EllipseGeometry  Center ="100,100"  RadiusX ="50"  RadiusY ="50" ></ EllipseGeometry >

四、RectangleGeometry 类：描述二维矩形。

转自：WPF入门(三)->几何图形之矩形(RECTANGLEGEOMETRY)

我们可以使用RectangleGeometry来绘制一个矩形或者正方形

下面我们先来看一段代码：

< Window  x:Class ="WPF.SimpleGraph.Rectangle"
        xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
        Title ="Rectangle"  Height ="300"  Width ="300" >
     < Canvas >
         < Path  Stroke ="Red"  StrokeThickness ="5" >
             < Path.Data >
                 < RectangleGeometry  Rect ="50,50,150,80" ></ RectangleGeometry >
             </ Path.Data >
         </ Path >
     </ Canvas >
</ Window >

执行结果：

其中RectangleGeometry 表示一个矩形图形，Rect表示矩形的尺寸，它用一个数值字符串表示，数值之间使用逗号分割，例如"50,50,150,80"，假设参数"x=50,y=50,w=150,h=80"前面两位x,y表示该矩形左上端点的位置，如果设置x=0,y=0便于canvas边框重叠，w表示width矩形的宽度，h表示height矩形的高度。

 

同理，如果我们想要定义一个正方形，可以使w=h即可

< RectangleGeometry  Rect ="0,0,120,120" ></ RectangleGeometry >

结果：

五、PathGeometry类：表示一个可能由弧、曲线、椭圆、直线和矩形组成的复杂形状。

转自：WPF入门(三)->几何图形之不规则图形(PATHGEOMETRY)

前面我们给大家介绍了LineGeometry,EllipseGeometry,CombinedGeometry等一些规则图形的使用方法，下面我们来看下如何使用PathGeometry来创建不规则图形

下面先来看一段代码

 

< Window  x:Class ="WPF.SimpleGraph.PathFill.Window1"
        xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
        Title ="Window1"  Height ="300"  Width ="300" >
     < Canvas >
         < Path  Stroke ="DarkGray"  StrokeThickness ="2" >
             < Path.Data >
                 < PathGeometry >
                     < PathFigure  StartPoint ="80,40"  IsClosed ="False" >
                         < LineSegment  Point ="160,40" ></ LineSegment >
                         < LineSegment  Point ="200,100" ></ LineSegment >
                         < LineSegment  Point ="80,100" ></ LineSegment >
                         < LineSegment  Point ="80,40" ></ LineSegment >
                     </ PathFigure >
                 </ PathGeometry >
             </ Path.Data >
         </ Path >
     </ Canvas >
</ Window >

执行结果是：

根据执行的结果，我们可以看到，程序画出了一个不等边的矩形，下面我们来分析一下，该图形是如何画出来了。

 

PathFigure类：表示几何图形的一个子部分、一系列单独连接的二维几何线段

首先我们看到在PathGeometry元素中我们添加了一个名为PathFigure的元素，它表示PathGeometry图形的一部分，一个PathGeometry图形可以包含一个或多个PathFigure。PathFigure有一个StartPoint属性，它表示该几何图形线段的起始位置

LineSegment表示在PathFigure中两个点之间的一条连线。

< LineSegment  Point ="160,40" ></ LineSegment >

该代码表示定义一条线，它的起始位置是PathFigure的StartPoint，结束位置是LineSegment的Point

 

第二条线

< LineSegment  Point ="160,40" ></ LineSegment >
< LineSegment  Point ="200,100" ></ LineSegment >

 它的起始位置是上一个LineSegment的Point，结束位置是它自己的Point，前后两条线条是互相连贯的。

本程序的划线步骤如下图：

 

< PathFigure  StartPoint ="80,40"  IsClosed ="False" >

在PathFigure元素中有一个属性IsClosed，该属性的含义表示是否将最后一个端点与StartPoint连接，true=连接，false=不连接

转自：WPF入门(三)->几何图形之不规则图形(PATHGEOMETRY) (2)

上一节我们介绍了PathGeometry中LineSegment是点与点之间绘制的一条直线，那么我们这一节来看一下点与点之间绘制曲线ArcSegment

先来看一段代码

< Window  x:Class ="WPF.SimpleGraph.PathFill.Window1"
        xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
        Title ="Window1"  Height ="300"  Width ="300" >
     < Canvas >
         < Path  Stroke ="DarkGray"  StrokeThickness ="2" >
             < Path.Data >
                 < PathGeometry >
                     < PathFigure  StartPoint ="40,40"  IsClosed ="True" >
                         < LineSegment  Point ="40,130" ></ LineSegment >
                         < ArcSegment  Point ="60,150"  Size ="20,20"   ></ ArcSegment >
                         < LineSegment  Point ="200,150" ></ LineSegment >
                         < ArcSegment  Point ="220,130"  Size ="20,20" ></ ArcSegment >
                         < LineSegment  Point ="220,40" ></ LineSegment >
                         < ArcSegment  Point ="200,20"  Size ="20,20" ></ ArcSegment >
                         < LineSegment  Point ="60,20" ></ LineSegment >
                         < ArcSegment  Point ="40,40"  Size ="20,20" ></ ArcSegment >
                     </ PathFigure >
                 </ PathGeometry >
             </ Path.Data >
         </ Path >
     </ Canvas >
</ Window >

执行结果：

 

其中ArcSegment表示一条点到点之间的曲线

 

例如该代码它

 

< PathFigure  StartPoint ="40,40"  IsClosed ="False" >
                         < ArcSegment  Point ="40,80"  Size ="20,20"   ></ ArcSegment >
                     </ PathFigure >

 

它的效果是从点(40,40)到点(40,80)之间绘制一条曲线

ArcSegment的Size属性表示该曲线的弧度及形状，详细弧度与值的关系请查考msdn

 

 

< LineSegment  Point ="40,130" ></ LineSegment >
< ArcSegment  Point ="60,150"  Size ="20,20"   ></ ArcSegment >

该代码表示画一条从StartPoint到40,130的直线，再从40,130到60,150的曲线

 

依次类推，我们便可画出一个弧形角的矩形。

六、CombinedGeometry类：表示由两个 Geometry 对象组合定义的二维几何形状。

转自：WPF入门(三)->两个几何图形合并(COMBINEDGEOMETRY)

在WPF中，提供了一个CombinedGeometry对象可以使两个几何图形合并产生效果

先来看一段代码：

 

< Window  x:Class ="WPF.SimpleGraph.Combine"
        xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
        Title ="Combine"  Height ="300"  Width ="300" >
     < Canvas >
         < Path  Stroke ="Red"  StrokeThickness ="2"  Fill ="Yellow" >
             < Path.Data >
                 < CombinedGeometry  GeometryCombineMode ="Exclude" >
                     < CombinedGeometry.Geometry1 >
                         < EllipseGeometry  RadiusX ="50"  RadiusY ="50"  Center ="75,75"   />
                     </ CombinedGeometry.Geometry1 >
                     < CombinedGeometry.Geometry2 >
                         < EllipseGeometry  RadiusX ="50"  RadiusY ="50"  Center ="125,75"   />
                     </ CombinedGeometry.Geometry2 >
                 </ CombinedGeometry >
             </ Path.Data >
         </ Path >
     </ Canvas >
</ Window >

执行结果：

其中Path元素的Fill属性表示使用yellow颜色来填充该图形

     CombinedGeometry表示一个合并的图形，它有两个属性Geometry1和Geometry2，它们表示该图形由哪两个图形来合并，该例子中，我们使用两个圆形EllipseGeometry来合并

< CombinedGeometry  GeometryCombineMode ="Exclude" >

这句话中有一个GeometryCombineMode的属性，它表示合并的方式

 

 

下面我将不同的合并方式获得的效果给大家罗列一下：

 

< CombinedGeometry  GeometryCombineMode ="Exclude" >

 

 

 

< CombinedGeometry  GeometryCombineMode ="Intersect" >

 

 

 

< CombinedGeometry  GeometryCombineMode ="Union" >

 

 

 

 

< CombinedGeometry  GeometryCombineMode ="Xor" >

 

 

七、LinearGradientBrush类：线性渐变绘制区域

转自：WPF入门(四)->线形区域PATH内容填充之渐变色(LINEARGRADIENTBRUSH)

前面我们介绍到，Path对象表示一个用直线或者曲线连接的图形，我们可以使用Path.Data属性来设置该图形的形状，同时我们也可以使用Data.Fill属性来设置该图形中的填充色或背景图片等。

下面我们先来看一段代码

< Window  x:Class ="WPF.SimpleGraph.PathFill.Window1"
        xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
        Title ="Window1"  Height ="300"  Width ="300" >
     < Canvas >
         < Path  Stroke ="DarkGray"  StrokeThickness ="2" >
             < Path.Data >
                 < PathGeometry >
                     < PathFigure  StartPoint ="40,40"  IsClosed ="True" >
                         < LineSegment  Point ="40,130" ></ LineSegment >
                         < ArcSegment  Point ="60,150"  Size ="20,20"   ></ ArcSegment >
                         < LineSegment  Point ="200,150" ></ LineSegment >
                         < ArcSegment  Point ="220,130"  Size ="20,20" ></ ArcSegment >
                         < LineSegment  Point ="220,40" ></ LineSegment >
                         < ArcSegment  Point ="200,20"  Size ="20,20" ></ ArcSegment >
                         < LineSegment  Point ="60,20" ></ LineSegment >
                         < ArcSegment  Point ="40,40"  Size ="20,20" ></ ArcSegment >
                     </ PathFigure >
                 </ PathGeometry >
             </ Path.Data >
             < Path.Fill >
                 < LinearGradientBrush  StartPoint ="0,0"  EndPoint ="1,1" >
                     < GradientStop  Color ="White"  Offset ="0.25" ></ GradientStop >
                     < GradientStop  Color ="LightBlue"  Offset ="0.5" ></ GradientStop >
                     < GradientStop  Color ="Blue"  Offset ="0.75" ></ GradientStop >
                     < GradientStop  Color ="DarkBlue"  Offset ="1" ></ GradientStop >
                 </ LinearGradientBrush >
             </ Path.Fill >
         </ Path >
     </ Canvas >
</ Window >

它的执行结果是：

 

下面我们来分析一下该图形的产生原理

首先，我们通过Path.Data来绘制了一个弧形角的矩形

然后，使用Path.Fill来向该矩形中填充渐变色。

 

 LinearGradientBrush类：使用线性渐变绘制区域。

我们可以使用LinearGradientBrush类来绘制一个颜色渐变的区域，它有一个StartPoint属性表示线性渐变的二维起始坐标，而EndPoint指渐变的终止坐标。默认的线性渐变是沿对角方向进行的。

如图所示，它描绘了以对角线方向描绘渐变线

渐变值的取值范围是0-1，它用小数来表示从起点到终点的比率

比如说，我们想要以水平中轴来做渐变线(如下图)

我们可以将调整StartPoint和EndPoint

< LinearGradientBrush  StartPoint ="0,0.5"  EndPoint ="1,0.5" >

 

我们可以使用GradientStop来描述渐变的颜色和位置。

 GradientStop类：描述渐变中过渡点的位置和颜色。

 GradientStop的Color属性表示渐变的颜色，Offset表示渐变从上一个位置开始，到Offset位置结束的渐变

例如下面的代码

< LinearGradientBrush  StartPoint ="0,0.5"  EndPoint ="1,0.5" >
     < GradientStop  Color ="Yellow"  Offset ="0.5" ></ GradientStop >
     < GradientStop  Color ="LightBlue"  Offset ="0.7" ></ GradientStop >
</ LinearGradientBrush >

 它表示从0-0.5这个段区域的颜色是Yellow

0.5-0.7这段区域表示从Yellow到LightBlue的渐变

0.7-1这段区域的颜色是LightBlue

八、 ImageBrush类：使用 ImageSource 绘制一个区域

转自：WPF入门(四)->线形区域PATH内容填充之填充图(IMAGEBRUSH)

前面我们提到了LinearGradientBrush可以用来画渐变填充图，那么我们同时也可以使用ImageBrush来填充图片，它的使用方法相对比较简单

下面我们先来看一段代码

< Window  x:Class ="WPF.SimpleGraph.PathFill.Window1"
        xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
        Title ="Window1"  Height ="300"  Width ="300" >
     < Canvas >
         < Path  Stroke ="DarkGray"  StrokeThickness ="2" >
             < Path.Data >
                 < PathGeometry >
                     < PathFigure  StartPoint ="40,40"  IsClosed ="True" >
                         < LineSegment  Point ="40,130" ></ LineSegment >
                         < ArcSegment  Point ="60,150"  Size ="20,20"   ></ ArcSegment >
                         < LineSegment  Point ="200,150" ></ LineSegment >
                         < ArcSegment  Point ="220,130"  Size ="20,20" ></ ArcSegment >
                         < LineSegment  Point ="220,40" ></ LineSegment >
                         < ArcSegment  Point ="200,20"  Size ="20,20" ></ ArcSegment >
                         < LineSegment  Point ="60,20" ></ LineSegment >
                         < ArcSegment  Point ="40,40"  Size ="20,20" ></ ArcSegment >
                     </ PathFigure >
                 </ PathGeometry >
             </ Path.Data >
             < Path.Fill >
                 < ImageBrush  ImageSource ="d:\我的文档\图片收藏\Azul.jpg"   ></ ImageBrush >
             </ Path.Fill >
         </ Path >
     </ Canvas >
</ Window >

执行结果：

 

首先我们使用Path.Data来描绘一个弧形角的矩形，使用Path.Fill来填充该矩形。

Path.Fill中使用ImageBrush来指定图片，其中ImageSource指定的是图片的地址，它可以是本地的物理地址，也可以是网络的web地址。