這是一個簡單的GDI+的例子。講的是怎么從無到有繪制一個極坐標系，以及在此基礎上繪制數據圖。按照類似的思路，你可以畫出直角坐標系、對數直角系、外太空銀河系……
本文比較淺顯，覺得沒有幫助者請按組合鍵：Alt+F4，走好。
歡迎大家指教，歡迎改造，然后把代碼和圖貼在這里。大家一起看看能把自己的創造力激發到什么程度。
你可以通過本文學到怎么用非數學的方法解決數學問題，以此類推，就算碰到不懂的東西，也可以用自己懂的東西來代替。編程序，尤其是界面編程，只需要「看起來一樣」，更敬業點就「用起來一樣」。至於你要不要用什么jjyy的技術，的技巧，的手段，都是浮雲。
不多說了。我們要做的東西最后效果是這樣的。
圖中曲線是一個天線方向圖，非常適合在極坐標下描繪。 文中是直接在窗體上繪制，你完全可以自行封裝到控件里，這樣用起來更加方便。
（正文開始） 寫在前面的話 做事情，一切以目標為出發點，倒着找過去，看有哪些方法技術資源，具體的方法技術手段都是次要的，只要能達到目的。 我不會多線程，如果你需要讓它運行在單獨的線程上，還請自己改造。（似乎還真有這樣ocd的人吧，哈哈）
目標設定 （下面是例子，不針對任何人物、事件、團體、星球） boss接到了一單生意，是幫某山寨廠做一個山寨手機天線的信號測試系統。其中，我分到的部分是做天線方向圖的顯示界面模塊。其實我懂個p的天線、方向圖之類的啊，於是boss告訴我，並強調：我不管你怎么做，總之要「看起來」像這樣。
ok，不管會不會，山寨是本行，拿着原版開始分析。
分析坐標系 說實話，數學那套玩意老早就還給老師了，現在要讓我玩坐標系這樣高深的東西。得虧哥們還有點印象，這樣圓不拉嘰的圖，一般用極坐標來畫是比較方便的。連上Wikipedia復習一下：極坐標是一個二維坐標系統。該坐標系統中的點由一個夾角和一段相對中心點——極點（相當於我們較為熟知的直角坐標系中的原點）的距離來表示。
嗯，很好，亂七八糟的，看不太懂啊，怎么辦。不管了，把這東西先放一遍，還是用山寨的方法解決。把boss給的那張圖拿來分析下，其實就是很多同心圓，和過圓心的輻條（借用自行車術語，雖然不知道正確的名字，就這么叫了吧）。
那么我只需要畫出同心圓，再畫輻條，就ok了吧。畫同心圓怎么畫呢？嗯，我可以這樣，從外面的大圓開始，用DrawEllipse()畫一個圓，然后收縮下半徑，再畫一個，如此這般……好了，有想法就行動，管他是nb方法還是sb方法，一直坐那zb，最后被炒了那才sb。
畫出同心圓的方法。
View Code
// 畫圓 private void drawCircles(Graphics g, Rectangle rect) { // 圓的直徑等於繪圖區域最短邊 float diameter = Math.Min(rect.Width, rect.Height); // 半徑 float radius = diameter / 2; // 計算圓心（其實就是繪圖區域矩形中心） PointF center = new PointF( rect.X + rect.Width / 2, rect.Y + rect.Height / 2 ); // 畫幾個圓，先試試5個 int count = 5; float diameterStep = diameter / count; float radiusStep = radius / count; // 生成圓的范圍 RectangleF cirleRect = new RectangleF(); cirleRect.X = center.X - radius; cirleRect.Y = center.Y - radius; cirleRect.Width = cirleRect.Height = diameter; // 畫同心圓 for (int i = 0; i < count; i++) { g.DrawEllipse(Pens.Gray, cirleRect); cirleRect.X += radiusStep; cirleRect.Y += radiusStep; cirleRect.Width -= diameterStep; cirleRect.Height -= diameterStep; } }
把這段代碼添加到Paint事件里，看看效果如何。
Good，效果還湊合，好像有點鋸齒哦，那我就把抗鋸齒打開，順手把文字抗鋸齒也打開。
|
1
2
|
e.Graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
// 圖形抗鋸齒
e.Graphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias;
// 文字抗鋸齒
|
接下來就要畫輻條了。那個線可不能就像圖里一個十字叉就完事了的，肯定要能自己設n條。想當初就是曾經思維簡單了沒有考慮到這種變數，被客戶和boss煩得天昏地暗。再也不會上當了。
輻條怎么畫呢，思考下，在草稿紙上畫畫先。
（以下都是中學數學，本人上了大學以后數學從沒及格過）
從少到多看看輻條的規律。啊，原來是這樣啊，我不一定非要把輻條看成穿過圓心的，我可以看成從圓心發出的n個射線，把圓切成了n個扇面，每個角度就是360°÷n。這樣那就好辦了，剛才我畫圓的時候已經算出來圓心位置了，只要再算出射線終點的坐標，就可以用DrawLine()畫線了。但是，射線終點又要怎么算呢，我可是要畫到GDI+里哦。
用黑色的筆畫出圓，紅色的畫出GDI+坐標系，那么就可以算出來終點在GDI+下的坐標。圓心(x0,y0)和r半徑剛才我已經算出來了，θ就是360/n。現在所有參數都確定了，只要把圓心、半徑這幾個我需要使用的變量從畫圓的方法里拿出來大家用，我就可以開始寫畫輻條的方法了。
// 提出來公用 float diameter, radius; PointF center; // 畫圓 private void drawCircles(Graphics g, Rectangle rect) { // （略） } // 輻射線 private void drawCrosshair(Graphics g) { int count = 8; if (count > 0) { // 計算角度 float angle = 0; float angleStep = 360 / count; PointF endPoint = new PointF(); for (int i = 0; i < count; i++) { // 得到終點 endPoint = getPoint(angle); g.DrawLine(Pens.Gray, center, endPoint); angle += angleStep; angle %= 360; } } } // 計算終點 private PointF getPoint(double angle) { PointF pt = new PointF(); pt.X = (float)(radius * Math.Cos(angle * Math.PI / 180) + center.X); pt.Y = (float)(radius * Math.Sin(angle * Math.PI / 180) + center.Y); return pt; }
把代碼加到Paint事件畫圓的后面，看看效果。
Yeah, baby，你太聽話了。
永不滿足的客戶·永不結束的工作
沒過半天，客戶就找到boss，要求在輻射線邊上加上角度數字。於是，我「義不容辭」的開始了新一輪改造。
說起加上數字，先前我已經得到了每個射線終點的坐標，那我直接在那坐標上DrawString()出角度數字就行了吧？嗯，在void drawCrosshair()里面先加上這句試試。
|
1
2
|
// 畫角度值
g.DrawString(angle.ToString(
"0"
) +
"°"
,
this
.Font, Brushes.Gray, endPoint);
|
哦，賣糕的，問題多多哦。最下面的字跑出畫面了，上面的和左邊的字跑到圓圈里面，右邊的字也有點往里靠。改改試試看。先把畫圓的區域縮小一點，以便下面的標簽能顯示出來。
|
1
2
3
4
5
|
//drawDiagramCircles(e.Graphics, this.ClientRectangle);
// 縮小點畫圓的區域
Rectangle rect =
this
.ClientRectangle;
rect.Inflate(0, -20);
drawDiagramCircles(e.Graphics, rect);
|
ok，解決下一個問題。先思考下，什么情況下字會跑到圓里去：θ∈(90°, 270°)這個區間。那我就在這個區間畫文字的時候，把文字往左平移出去就行了。而270°時，我把文字往上移動試試看。在drawCrosshair()畫文字的地方。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
// 把要畫的字符串提出來便於操作
string
angleString = angle.ToString(
"0"
) +
"°"
;
// 畫角度值，如果文字在90-270度區間內，
PointF textPoint = endPoint;
if
(angle == 270)
textPoint.Y -= TextRenderer.MeasureText(angleString,
this
.Font).Height;
// 用TextRenderer測量字符串大小
else
if
(angle < 270 && angle > 90)
textPoint.X -= TextRenderer.MeasureText(angleString,
this
.Font).Width;
else
textPoint.X += 8;
// 隨便來點漂移
g.DrawString(angleString,
this
.Font, Brushes.Gray, textPoint);
|
看看效果。
嗯哼，很好。（其實我覺得最好的辦法是分象限，比如第一象限就增加x、增加y，第二象限就增加x、減少y，第三象限減少x、減少y，第四象限減少x、增加y）
加入數據點
光畫一副坐標系那肯定是什么都干不了的，所以還有最重要的添加數據。所謂一個數據，就是包含了角度、數值的這樣一組數，比如天線對着某個方向（角度）的接收信號強度（數值）。角度很好理解，就是0到360°，然后轉圈。數值就要費點功夫了。用戶添加的數據，肯定是他們采集到的真實數據。這個數據，要映射到我這里做的坐標圖里面，使其同樣大小數值具有同樣的映射點，最小數值映射在圓心，最大數值映射在射線終點。這樣，所有的數據就都可以用這張圖來記錄了。下面使用最簡單的線性映射來設計。所謂線性映射，其實就是這樣。
所以，在全局變量里，我加入了數據范圍的上下限。（可以任意，只要max大於min，不能等於）
|
1
2
|
float
min = 0;
float
max = 100;
|
為了便於后續操作，我決定把「角度 - 數值」這樣一組數據封裝在一個類里，然后用一個列表來存儲管理。
View Code
public class PolarValue { float ang = 0; float val = 0; // 角度 public float Angle { get { return ang; } set { ang = value; } } // 數值 public float Value { get { return val; } set { val = value; } } public PolarValue(float angle, float value) { this.ang = angle; this.val = value; } } // 數據列表 public List<PolarValue> values = new List<PolarValue>();
現在我有了一組數據點，我需要做的就是把數據點映射到坐標圖上，如此遍歷每一點並連接之，就畫出了我所需要的方向圖。這就是映射的方法。
|
1
2
3
4
5
6
7
8
9
10
|
private
PointF getMappedPoint(PolarValue pv)
{
// 計算映射在坐標圖中的半徑
float
r = radius * (pv.Value - min) / (max - min);
// 計算GDI+坐標
PointF pt =
new
PointF();
pt.X = (
float
)(r * Math.Cos(pv.Angle * Math.PI / 180) + center.X);
pt.Y = (
float
)(r * Math.Sin(pv.Angle * Math.PI / 180) + center.Y);
return
pt;
}
|
寫到這里，我不由得回頭看了看剛才畫輻條時，為了計算輻條終點而寫的getPoint()方法。這兩個方法實在是太像了，唯一區別就是getMappedPoint()使用變化的數值，而getPoint()使用固定的數值（輻條終點可以認為是r=R，即value=max）。現在合並這兩個方法，並修改相應調用的地方。
|
1
2
3
4
5
6
7
8
9
10
11
|
// 合並后的映射方法
private
PointF getMappedPoint(
float
angle,
float
value)
{
// 計算映射在坐標圖中的半徑
float
r = radius * (value - min) / (max - min);
// 計算GDI+坐標
PointF pt =
new
PointF();
pt.X = (
float
)(r * Math.Cos(angle * Math.PI / 180) + center.X);
pt.Y = (
float
)(r * Math.Sin(angle * Math.PI / 180) + center.Y);
return
pt;
}
|
修改調用的地方
|
1
2
3
4
|
// 在drawCrosshair()中
// （略）
// 得到終點
endPoint = getMappedPoint(angle, max);
|
現在可以一口氣把所有數據點畫出來了。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
private
void
drawPoints(Graphics g, List<PolarValue> pointList)
{
// 計算下一點
PointF nextPt;
for
(
int
i = 0; i < pointList.Count; i++)
{
if
((i + 1) < pointList.Count)
nextPt = getMappedPoint(pointList[i + 1].Angle, pointList[i + 1].Value);
else
nextPt = getMappedPoint(pointList[0].Angle, pointList[0].Value);
// 連接當前點和下一點
g.DrawLine(Pens.Black, nextPt, getMappedPoint(pointList[i].Angle, pointList[i].Value));
}
}
|
隨便添加幾個數據，順便設置下圓圈數和輻條數，看看效果如何。
圓圈=3，輻條=4
圓圈=6，輻條=8
圓圈=9，輻條=16
一些變化
（以下內容為搞笑） 好了，我們做完了這個項目，送走了天線的客戶。現在又來了一個游戲的客戶。他要求我們要制作一個類似FIFA或者實況的運動游戲，游戲里面要有一個運動員個人素質參數的查看界面。 我們要怎么做？重新做？不，就着上一個客戶的稍微那么改上一改，就像這樣。