如何設計技能嚮導圖

說明：請忽略label標籤！

開發功能思路：根據數據庫傳來的考覈數據對每個人的成績進行單獨顯示，同時通過比率的方式傳給技能框圖。 

開發步驟：

1.設計五星圖，主要外框部分是通過直線繪製，內部是通過射線繪製；

參考代碼：

 Bitmap bt = new Bitmap(groupBox2.Width, groupBox2.Height);           //實例化一個Bitmap對象
            g = Graphics.FromImage(bt);                                                   //實例化Graphics對象
            Pen p1 = new Pen(Color.Red, 1);                                             //設置Pen對象用來繪畫X軸
            Pen p2 = new Pen(Color.LightSkyBlue, 1);                                             //設置Pen對象用來繪畫X軸
            g.DrawLine(p2, new Point(groupBox2.Width/2,  50), new Point(groupBox2.Width / 2+100, 125));         
            g.DrawLine(p2, new Point(groupBox2.Width / 2, 50), new Point(groupBox2.Width / 2 - 100, 125));         
            g.DrawLine(p2, new Point(groupBox2.Width / 2-100, 125), new Point(groupBox2.Width / 2 -70 , 250));         
            g.DrawLine(p2, new Point(groupBox2.Width / 2 +100, 125), new Point(groupBox2.Width / 2 +70, 250));         
            g.DrawLine(p2, new Point(groupBox2.Width / 2 - 70, 250), new Point(groupBox2.Width / 2 + 70, 250));
            // 繪製連接線
            g.DrawLine(p2, new Point(groupBox2.Width / 2, 155), new Point(groupBox2.Width / 2, 50));
            g.DrawLine(p2, new Point(groupBox2.Width / 2 ,155), new Point(groupBox2.Width / 2 + 100, 125));
            g.DrawLine(p2, new Point(groupBox2.Width / 2, 155), new Point(groupBox2.Width / 2 - 100, 125));
            g.DrawLine(p2, new Point(groupBox2.Width / 2, 155), new Point(groupBox2.Width / 2 - 70, 250));
            g.DrawLine(p2, new Point(groupBox2.Width / 2, 155), new Point(groupBox2.Width / 2 + 70, 250));
            groupBox2.BackgroundImage = bt;

 關於函數內部的數據，請按照標準定義編寫；

2.繪製五星實圖，通過函數g.FillPolygon( );進行繪製，內部只需要傳入參數即可；

參考代碼：

Point point1 = new Point(groupBox2.Width / 2, 60);
Point point2 = new Point(groupBox2.Width / 2 - 100, 125);
Point point3 = new Point(groupBox2.Width / 2 + 100, 125);
Point point4 = new Point(groupBox2.Width / 2 - 70, 250);
Point point5 = new Point(groupBox2.Width / 2 + 70, 250);
Point[] pntArr = { point1, point2, point4, point5, point3 };
g.FillPolygon(Brushes.Honeydew, pntArr);

請注意，此步驟需要內部邏輯判斷進行測試；

以上！

Copyright [2019/8/13] by [Masir]

知識星球