Silverlight实用窍门系列：16.以某点为圆心绘制多条线，线与线之间角度相同以组成圆【附带源码实例】...

        在Silverlight中有一个基础的类Line，此类用于绘制直线。在数学中两点的坐标确定即可绘制直线，所以Silverlight中的Line类有4个属性分别是X1、Y1、X2、Y2分别代表起始点的坐标1和线结尾点的坐标2。设置好了这两个点的坐标就可以显示出一条直线来。本文标题是以某点为圆心绘制出多条线，且线和线之间的角度需要相同来组成一个圆。比如说：我们假设有3条线，需要组成一个圆，那么每条线之间的角度就是360/3=120度，如果我们有8条线，那么线和线之间的角度就是360/8=45度。要实现这个效果需要自定义一个线控件，为此线控件设置中心点的X、Y坐标和线的长度（也就是形成的圆的半径长度），根据线的数量每次通过数学计算出这条线的弧度和结尾点2的坐标位置。以此类推多条线组成一个圆。我们先看效果图如下：

        下面我们右键点击项目名称，添加一个Silverlight自定义控件命名为ucLine.xaml，在此自定义控件中添加一个Line线当然此线得在Canvas标签中。在ucLine.xaml中填入以下代码：

< Canvas x:Name = " LayoutRoot " Background = " White " >
< Line X1 = " 600 " Y1 = " 600 " X2 = " 1000 " Y2 = " 500 " x:Name = " LineD " Stroke = " Black " AllowDrop = " True " />
</ Canvas >

        在ucLine.xaml.cs中我们需要为此自定义控件新建以下几个属性分别是：R、AngleAll、CenterX、CenterY分别代表线长度、本线所在弧度、中心点X坐标、中心点Y坐标，代码如下：

private double _R;
private double _AngleAll;
private double _centerX;
private double _centerY;

/// <summary>
/// 中心圆半径
/// </summary>
public double R
{
get { return _R; }
set { _R = value; }
}
private double _X2;
private double _Y2;
/// <summary>
/// 指定本控件的X2坐标
/// </summary>
public double X2
{
get { return _X2; }
set
{
_X2 = value;
this .LineD.X2 = this .X2;
}
}
/// <summary>
/// 指定本控件的Y2坐标
/// </summary>
public double Y2
{
get { return _Y2; }
set
{
_Y2 = value;
this .LineD.Y2 = this .Y2;
}
}
/// <summary>
/// 本控件的中心原点X坐标
/// </summary>
public double CenterX
{
get { return _centerX; }
set
{
_centerX = value;
this .LineD.X1 = _centerX;
}
}
/// <summary>
/// 本控件的中心原点Y坐标
/// </summary>
public double CenterY
{
get { return _centerY; }
set
{
_centerY = value;
this .LineD.Y1 = _centerY;
}
}
/// <summary>
/// 本控件的起始线弧度
/// </summary>
public double AngleAll
{
get { return _AngleAll; }
set
{
_AngleAll = value;
// 计算得到角度，然后复制给线的终点坐标位置。注意：设置线终点坐标时须加入线的起点位置
double sinAngle = Math.Sin( this .AngleAll * Math.PI / 180 );
double cosAngle = Math.Cos( this .AngleAll * Math.PI / 180 );
this .LineD.X2 = cosAngle * this .R + this .CenterX;
this .LineD.Y2 = this .CenterY - sinAngle * this .R;
// this.tips.Content = AngleAll.ToString();
}
}

        关键在于根据调用此控件的时候的弧度即可设置此控件中Line的结尾点的坐标的计算，在这里不细说大家看源码即可。在Mainpage.xaml.cs中我们根据线的条数和线的长度计算出每条线应该有的弧度和R长度，下面请看代码：

CanvasDevice.Children.Clear();
// 获取需要设置多少条线
double lineCount = double .Parse(( this .comboBox1.SelectedItem as ComboBoxItem).Content.ToString());
// 获取需要设置的线的长度
double lineLenth = double .Parse( this .textBox1.Text.ToString());
// 设置平均角度
double angle = 360.0 / lineCount;
for ( int i = 0 ; i < lineCount; i ++ )
{
ucLine dline = new ucLine();
// 设置线的半径
dline.R = lineLenth;
// 设置线的起始点的坐标
dline.CenterX = 250 ;
dline.CenterY = 250 ;
// 设置这根线的角度
dline.AngleAll = angle * (i);
CanvasDevice.Children.Add(dline);
}

        本实例采用VS2010+Silverlight 4.0编写，点击 SLLine.rar 下载源码。