16.以某点为圆心绘制多条线,线与线之间角度相同以组成圆
2011-03-01 16:30
351 查看
在Silverlight中有一个基础的类Line,此类用于绘制直线。在数学中两点的坐标确定即可绘制直线,所以Silverlight中的 Line类有4个属性分别是X1、Y1、X2、Y2分别代表起始点的坐标1和线结尾点的坐标2。设置好了这两个点的坐标就可以显示出一条直线来。本文标题 是以某点为圆心绘制出多条线,且线和线之间的角度需要相同来组成一个圆。比如说:我们假设有3条线,需要组成一个圆,那么每条线之间的角度就是 360/3=120度,如果我们有8条线,那么线和线之间的角度就是360/8=45度。要实现这个效果需要自定义一个线控件,为此线控件设置中心点的 X、Y坐标和线的长度(也就是形成的圆的半径长度),根据线的数量每次通过数学计算出这条线的弧度和结尾点2的坐标位置。以此类推多条线组成一个圆。我们 先看效果图如下:
![](http://blog.51cto.com/attachment/201203/230759945.jpg)
下面我们右键点击项目名称,添加一个Silverlight自定义控件命名为ucLine.xaml,在此自定义控件中添加一个Line线当然此线得在Canvas标签中。在ucLine.xaml中填入以下代码:
在ucLine.xaml.cs中我们需要为此自定义控件新建以下几个属性分别是:R、AngleAll、CenterX、CenterY分别代表线长度、本线所在弧度、中心点X坐标、中心点Y坐标,代码如下:
关键在于根据调用此控件的时候的弧度即可设置此控件中Line的结尾点的坐标的计算,在这里不细说大家看源码即可。在Mainpage.xaml.cs中我们根据线的条数和线的长度计算出每条线应该有的弧度和R长度,下面请看代码:
![](http://blog.51cto.com/attachment/201203/230759945.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); }
相关文章推荐
- Silverlight实用窍门系列:16.以某点为圆心绘制多条线,线与线之间角度相同以组成圆【附带源码实例】
- CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
- 题目:有1、2、3、4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少?
- 利用反射强制转换结构相同的类(类之间无需有继承关系)
- [迷思者系列2]从 0 到 n 之间选 k 个不重复的数组成一个序列
- BeanUtils的使用-在具有很多相同属性的两个bean之间复制属性值
- 角度和弧度之间的转换
- CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
- Linux使用diff命令比较文件找出文件之间相同的部分
- hdu 3622 Bomb Game 2-SAT+二分答案 有N对点,求最大的半径R,使从每对点中选择一个点,且这N个点以自己为圆心,半径为R的圆两两不相交.(最大半径在所有半径相同情况下)
- 部署FIM 2010 R2——7验证不同林之间相同用户名密码同步
- python 练习题 有1、2、3、4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少?
- MKMapView类——获取并绘制两点之间的路线
- utf-8和utf-16之间的互相转化
- 谷歌笔试题--给定一个集合A=[0,1,3,8](该集合中的元素都是在0,9之间的数字,但未必全部包含), 指定任意一个正整数K,请用A中的元素组成一个大于K的最小正整数。
- [dlang](三)具有相同属性的不同类之间的拷贝
- 相同vlan之间的相互访问
- 编程实现将任意的十进制整数转换成任意R进制数(R在2-16之间)
- effective c++ 条款13,16(以对象管理资源,成对使用new delete的形式相同)
- Qt之QSpacerItem(控件之间的间距不尽相同,可以借助QSpacerItem来设置,并且还可以对QSpacerItem设置QSizePolicy)