新閣上位機開發---手把手教你開發圓盤儀表控制元件
阿新 • • 發佈：2022-03-16
前言
大家好，我是新閣教育韓工，前幾天在網上看到了一個比較好看的環形控制元件，今天我們來嘗試使用GDI+的方式來繪製一下。
建立專案
上位機開發中，自定義控制元件庫其實本質上就是一個類庫，所以我們在建立專案時直接建立類庫專案。
在建立好的類庫專案中新增“使用者控制元件”。
實現思路
整個控制元件其實是由四個部分組成的。第一個部分為一個固定顏色的底圓，第二部分是一個漸變色的扇形，第三部分是一個顏色與窗體背景色相同的上圓，第四部分是顯示百分比的文字。最後將這四個部分疊加起來就得到了我們最終想要得到的控制元件。
實現過程
1.繪製準備
C#程式碼實現：在使用者控制元件中新增程式碼，我們使用OnPaint事件來繪製控制元件，通過引數 e 來獲取畫布。並給畫布設定一些屬性。
2.繪製底圓
C#程式碼實現：我們在事件中繼續新增一些程式碼，使用畫布的FillEllipse（）方法繪製一個底圓，底圓的大小依照整個控制元件的大小建立。
測試效果如下:
3.繪製扇形
C#程式碼實現：首先建立屬性與欄位，以便使用屬性來控制扇形的區域，使得扇形的區域是可變的。
繪製扇形的大小與底圓的大小相一致，顏色採用漸變色。
//繪製扇形
Rectangle rectangle2 = new Rectangle(1, 1, this.Width - 2, this.Height - 2);
LinearGradientBrush brush2 = new LinearGradientBrush(rectangle2, Color.Blue, Color.Red, 150.0f, true);
this.PercentVal = (ActureValue / MaxValue) * 100;
graphics.FillPie(brush2, rectangle2, -90, (ActureValue / MaxValue) * 360f);
測試效果如下:
4.繪製上圓
C#程式碼實現：繪製上圓比較簡單，大小比底圓稍小，位置在整個控制元件中心，顏色與控制元件顏色相同。
測試效果如下:
5.繪製文字
C#程式碼實現：最後在控制元件的中心位置繪製文字
測試效果如下:
總結
經過大致五個步驟就可以使用GDI+的方式來繪製出一個好看的顯示百分比的環形控制元件，希望可以給大家一些啟發。
上位機開發中，GDI+控制元件經常需要用到，歡迎大家來新閣教育學習，我是韓老師，用我的專業，成就你的夢想！