Windows Phone 7 矢量图形编程

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;

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);

 

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

 

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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Threading;
using Microsoft.Phone.Controls;

namespace GrowingPolygons
{
    public partial class MainPage : PhoneApplicationPage
    {
        Point center;
        double radius;
        int numSides = 2;

        public MainPage()
        {
            InitializeComponent();
            Loaded += OnLoaded;
        }

        void OnLoaded(object sender, RoutedEventArgs args)
        {
            center = new Point(ContentPanel.ActualWidth / 2 - 1,
                               ContentPanel.ActualHeight / 2 - 1);
            radius = Math.Min(center.X, center.Y);

            polygon.Points.Add(new Point(center.X, center.Y - radius));
            polygon.Points.Add(new Point(center.X, center.Y + radius));

            DispatcherTimer tmr = new DispatcherTimer();
            tmr.Interval = TimeSpan.FromSeconds(1);
            tmr.Tick += OnTimerTick;
            tmr.Start();
        }

        void OnTimerTick(object sender, EventArgs args)
        {
            numSides += 1;

            for (int vertex = 1; vertex < numSides; vertex++)
            {
                double radians = vertex * 2 * Math.PI / numSides;
                double x = center.X + radius * Math.Sin(radians);
                double y = center.Y - radius * Math.Cos(radians);
                Point point = new Point(x, y);

                if (vertex < numSides - 1)
                    polygon.Points[vertex] = point;
                else
                    polygon.Points.Add(point);
            }

            PageTitle.Text = "" + numSides + " sides";            
        }
    }
}

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" />



using System;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace TouchAndDrawCircles
{
    public partial class MainPage : PhoneApplicationPage
    {
        Random rand = new Random();
        bool isDrawing, isDragging;//一个画图标示符  一个拖动图片标示符
        Path path;
        EllipseGeometry ellipseGeo;

        public MainPage()
        {
            InitializeComponent();
        }
        //点击操作程序的控件触发  点击屏幕
        protected override void OnManipulationStarted(ManipulationStartedEventArgs args)
        {
            if (isDrawing || isDragging)//意思是有同时两只手指点着屏幕的时候 最后的手指失效
                return;
            //OriginalSource获取对引发事件的对象的引用
            if (args.OriginalSource is Path)//如果画在其他的圆上
            {
                ellipseGeo = (args.OriginalSource as Path).Data as EllipseGeometry;

                isDragging = true;
                args.ManipulationContainer = ContentPanel;
                args.Handled = true;
            }
            else if (args.OriginalSource == ContentPanel)
            {
                ellipseGeo = new EllipseGeometry();
                ellipseGeo.Center = args.ManipulationOrigin;
                path = new Path();
                path.Stroke = this.Resources["PhoneForegroundBrush"] as Brush;
                path.Data = ellipseGeo;
                ContentPanel.Children.Add(path);

                isDrawing = true;
                args.Handled = true;
            }

            base.OnManipulationStarted(args);
        }
        //在操作控件的过程中触发 拖动手指
        protected override void OnManipulationDelta(ManipulationDeltaEventArgs args)
        {
            if (isDragging)//如果是拖动图片
            {
                Point center = ellipseGeo.Center;
                center.X += args.DeltaManipulation.Translation.X;
                center.Y += args.DeltaManipulation.Translation.Y;
                ellipseGeo.Center = center;

                args.Handled = true;
            }
            else if (isDrawing)//如果是画图
            {
                Point translation = args.CumulativeManipulation.Translation;
                double radius = Math.Max(Math.Abs(translation.X), 
                                         Math.Abs(translation.Y));
                ellipseGeo.RadiusX = radius;
                ellipseGeo.RadiusY = radius;

                args.Handled = true;
            }

            base.OnManipulationDelta(args);
        }
        //结束操作控件的触发 拿起手指
        protected override void OnManipulationCompleted(ManipulationCompletedEventArgs args)
        {
            if (isDragging)
            {
                isDragging = false;
                args.Handled = true;
            }
            else if (isDrawing)
            {
                Color clr = Color.FromArgb(255, (byte)rand.Next(256),
                                                (byte)rand.Next(256),
                                                (byte)rand.Next(256));
                path.Fill = new SolidColorBrush(clr);

                isDrawing = false;
                args.Handled = true;
            }

            base.OnManipulationCompleted(args);
        }
    }
}