博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Silverlight实用窍门系列:16.以某点为圆心绘制多条线,线与线之间角度相同以组成圆【附带源码实例】...
阅读量:4949 次
发布时间:2019-06-11

本文共 2725 字,大约阅读时间需要 9 分钟。

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

2011030116092428.jpg

        下面我们右键点击项目名称,添加一个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编写,点击  下载源码。

转载于:https://www.cnblogs.com/chengxingliang/archive/2011/03/01/1968124.html

你可能感兴趣的文章
[转载]java开发中的23种设计模式
查看>>
arm:启动代码判断是从nand启动还是从norflash启动,拷贝程序到内存的过程
查看>>
表格的拖拽功能
查看>>
QT5:QSS
查看>>
函数的形参和实参
查看>>
文字过长 用 ... 表示 CSS实现单行、多行文本溢出显示省略号
查看>>
1Caesar加密
查看>>
BZOJ 3779 重组病毒 LCT+线段树(维护DFS序)
查看>>
【TP SRM 703 div2 500】 GCDGraph
查看>>
MapReduce 重要组件——Recordreader组件 [转]
查看>>
2017-2018-2 20179225 《密码与安全新技术专题》 第6周作业
查看>>
转载:Linux命令行快捷键
查看>>
多个viewpager可能产生的问题
查看>>
webdriver api
查看>>
转载-FileZilla Server源码分析(1)
查看>>
apache 实现图标缓存客户端
查看>>
MediaWiki左侧导航栏通过特殊页面就可以设置。
查看>>
html基础之DOM操作
查看>>
几种图表库
查看>>
揭秘:黑客必备的Kali Linux是什么,有哪些弊端?
查看>>