Windows Phone 7 矢量图形编程

1. using System;  
2. using System.Collections.Generic;  
3. using System.Linq;  
4. using System.Net;  
5. using System.Windows;  
6. using System.Windows.Controls;  
7. using System.Windows.Documents;  
8. using System.Windows.Input;  
9. using System.Windows.Media;  
10. using System.Windows.Media.Animation;  
11. using System.Windows.Shapes;  
12. using System.Windows.Threading;  
13. using Microsoft.Phone.Controls;  
14.  
15. namespace GrowingPolygons  
16. {  
17.     public partial class MainPage : PhoneApplicationPage  
18.     {  
19.         Point center;  
20.         double radius;  
21.         int numSides = 2;  
22.  
23.         public MainPage()  
24.         {  
25.             InitializeComponent();  
26.             Loaded += OnLoaded;  
27.         }  
28.  
29.         void OnLoaded(object sender, RoutedEventArgs args)  
30.         {  
31.             center = new Point(ContentPanel.ActualWidth / 2 - 1,  
32.                                ContentPanel.ActualHeight / 2 - 1);  
33.             radius = Math.Min(center.X, center.Y);  
34.  
35.             polygon.Points.Add(new Point(center.X, center.Y - radius));  
36.             polygon.Points.Add(new Point(center.X, center.Y + radius));  
37.  
38.             DispatcherTimer tmr = new DispatcherTimer();  
39.             tmr.Interval = TimeSpan.FromSeconds(1);  
40.             tmr.Tick += OnTimerTick;  
41.             tmr.Start();  
42.         }  
43.  
44.         void OnTimerTick(object sender, EventArgs args)  
45.         {  
46.             numSides += 1;  
47.  
48.             for (int vertex = 1; vertex < numSides; vertex++)  
49.             {  
50.                 double radians = vertex * 2 * Math.PI / numSides;  
51.                 double x = center.X + radius * Math.Sin(radians);  
52.                 double y = center.Y - radius * Math.Cos(radians);  
53.                 Point point = new Point(x, y);  
54.  
55.                 if (vertex < numSides - 1)  
56.                     polygon.Points[vertex] = point;  
57.                 else  
58.                     polygon.Points.Add(point);  
59.             }  
60.  
61.             PageTitle.Text = "" + numSides + " sides";              
62.         }  
63.     }  
64. } 

Object
DependencyObject (abstract)
FrameworkElement (abstract)
Shape (abstract)

Rectangle (sealed)//矩形

Ellipse (sealed)//椭圆

Line (sealed)//线

Polyline (sealed)//多变线

Polygon (sealed) //多边形

Path (sealed)//有弧线的多边形

1、Rectangle 
绘制一个矩形形状，该形状可以具有笔画和填充。
命名空间： System.Windows.Shapes
语法
XAML <Rectangle .../>

Rectangle 不能支持子对象。如果要绘制一个包含其他对象的矩形区域，可以使用 Canvas。也可以使用复合几何图形，但在这种情况下，您可能使用 RectangleGeometry，而不是 Rectangle。Rectangle 或其他任何具有填充区域的形状的填充不一定必须是纯色。它可以是任何 Brush，包括 ImageBrush 或 VideoBrush。

下面的示例演示如何创建 Rectangle。

XAML

<Canvas> 
<Rectangle Width="100" Height="100" Fill="Blue" Stroke="Red" 
Canvas.Top="20" Canvas.Left="20" StrokeThickness="3" />

</Canvas>

2、Ellipse 
画一个椭圆

语法
XAML <Ellipse .../>

示例
myEllipse = new Ellipse();
myEllipse.Stroke = Brushes.Black;
myEllipse.Fill = Brushes.DarkBlue;
myEllipse.HorizontalAlignment = HorizontalAlignment.Left;
myEllipse.VerticalAlignment = VerticalAlignment.Center;
myEllipse.Width = 50;
myEllipse.Height = 75;
myGrid.Children.Add(myEllipse);

3、Line 
在两个点之间绘制一条直线。 
命名空间： System.Windows.Shapes
语法
XAML <Line .../>

4、Polyline

绘制一系列相互连接的直线。 
命名空间： System.Windows.Shapes
语法
XAML <Polyline .../>
此对象与 Polygon 对象类似，不同的是，此对象不需要是闭合的形状。

5、Polygon多边形

绘制一个多边形，它是形成闭合形。

//添加一个多边形的语法如下：

myPolygon = new Polygon();
myPolygon.Stroke = System.Windows.Media.Brushes.Black;
myPolygon.Fill = System.Windows.Media.Brushes.LightSeaGreen;
myPolygon.StrokeThickness = 2;
myPolygon.HorizontalAlignment = HorizontalAlignment.Left;
myPolygon.VerticalAlignment = VerticalAlignment.Center;

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Polygon Name="polygon"
                     Stroke="{StaticResource PhoneForegroundBrush}"
                     StrokeThickness="{StaticResource PhoneStrokeThickness}" />
        </Grid>

 6、Path

命名空间： System.Windows.Shapes
利用Path 绘制一系列相互连接的直线和曲线。直线和曲线维度通过 Data 属性声明，并且可以使用路径特定的 mini-language 或使用对象模型来指定。
从根本上讲，Path 是 Shape 对象。但是，可使用 Path 创建比其他 Shape 对象更复杂的二维图形。Path 对象可以绘制闭合或开放的形状、直线和曲线

XAML

<Path .../>

下面的示例使用 Path 对象绘制一个椭圆形。

绘制在 (50,50) 处的 EllipseGeometry

XAML

<Canvas 
<Path Fill="Gold" Stroke="Black" StrokeThickness="1">
<Path.Data>
<EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50" />
</Path.Data>
</Path> 
</Canvas>

实例点击屏幕画圆形：

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"
              Background="Transparent" />

1. using System;  
2. using System.Windows;  
3. using System.Windows.Input;  
4. using System.Windows.Media;  
5. using System.Windows.Shapes;  
6. using Microsoft.Phone.Controls;  
7.  
8. namespace TouchAndDrawCircles  
9. {  
10.     public partial class MainPage : PhoneApplicationPage  
11.     {  
12.         Random rand = new Random();  
13.         bool isDrawing, isDragging;//一个画图标示符  一个拖动图片标示符  
14.         Path path;  
15.         EllipseGeometry ellipseGeo;  
16.  
17.         public MainPage()  
18.         {  
19.             InitializeComponent();  
20.         }  
21.         //点击操作程序的控件触发  点击屏幕  
22.         protected override void OnManipulationStarted(ManipulationStartedEventArgs args)  
23.         {  
24.             if (isDrawing || isDragging)//意思是有同时两只手指点着屏幕的时候 最后的手指失效  
25.                 return;  
26.             //OriginalSource获取对引发事件的对象的引用  
27.             if (args.OriginalSource is Path)//如果画在其他的圆上  
28.             {  
29.                 ellipseGeo = (args.OriginalSource as Path).Data as EllipseGeometry;  
30.  
31.                 isDragging = true;  
32.                 args.ManipulationContainer = ContentPanel;  
33.                 args.Handled = true;  
34.             }  
35.             else if (args.OriginalSource == ContentPanel)  
36.             {  
37.                 ellipseGeo = new EllipseGeometry();  
38.                 ellipseGeo.Center = args.ManipulationOrigin;  
39.                 path = new Path();  
40.                 path.Stroke = this.Resources["PhoneForegroundBrush"] as Brush;  
41.                 path.Data = ellipseGeo;  
42.                 ContentPanel.Children.Add(path);  
43.  
44.                 isDrawing = true;  
45.                 args.Handled = true;  
46.             }  
47.  
48.             base.OnManipulationStarted(args);  
49.         }  
50.         //在操作控件的过程中触发 拖动手指  
51.         protected override void OnManipulationDelta(ManipulationDeltaEventArgs args)  
52.         {  
53.             if (isDragging)//如果是拖动图片  
54.             {  
55.                 Point center = ellipseGeo.Center;  
56.                 center.X += args.DeltaManipulation.Translation.X;  
57.                 center.Y += args.DeltaManipulation.Translation.Y;  
58.                 ellipseGeo.Center = center;  
59.  
60.                 args.Handled = true;  
61.             }  
62.             else if (isDrawing)//如果是画图  
63.             {  
64.                 Point translation = args.CumulativeManipulation.Translation;  
65.                 double radius = Math.Max(Math.Abs(translation.X),   
66.                                          Math.Abs(translation.Y));  
67.                 ellipseGeo.RadiusX = radius;  
68.                 ellipseGeo.RadiusY = radius;  
69.  
70.                 args.Handled = true;  
71.             }  
72.  
73.             base.OnManipulationDelta(args);  
74.         }  
75.         //结束操作控件的触发 拿起手指  
76.         protected override void OnManipulationCompleted(ManipulationCompletedEventArgs args)  
77.         {  
78.             if (isDragging)  
79.             {  
80.                 isDragging = false;  
81.                 args.Handled = true;  
82.             }  
83.             else if (isDrawing)  
84.             {  
85.                 Color clr = Color.FromArgb(255, (byte)rand.Next(256),  
86.                                                 (byte)rand.Next(256),  
87.                                                 (byte)rand.Next(256));  
88.                 path.Fill = new SolidColorBrush(clr);  
89.  
90.                 isDrawing = false;  
91.                 args.Handled = true;  
92.             }  
93.  
94.             base.OnManipulationCompleted(args);  
95.         }  
96.     }  
97. } 

System.Windows.Point Point1 = new System.Windows.Point(1, 50);
System.Windows.Point Point2 = new System.Windows.Point(10,80);
System.Windows.Point Point3 = new System.Windows.Point(50,50);
PointCollection myPointCollection = new PointCollection();
myPointCollection.Add(Point1);
myPointCollection.Add(Point2);
myPointCollection.Add(Point3);

myPolygon.Points = myPointCollection;
myGrid.Children.Add(myPolygon);

实例创建一个渐渐变成圆行的正多边形

本文转自linzheng 51CTO博客，原文链接:http://blog.51cto.com/linzheng/1078715