手把手教你開發圓盤儀表控件
前言
大家好，我是新閣教育韓工，前幾天在網上看到了一個比較好看的環形控件，今天我們來嘗試使用GDI+的方式來繪制一下。
創建項目
自定義控件庫其實本質上就是一個類庫，所以我們在創建項目時直接創建類庫項目。
在創建好的類庫項目中添加“用戶控件”。
實現思路
整個控件其實是由四個部分組成的。第一個部分為一個固定顔色的底圓，第二部分是一個漸變色的扇形，第三部分是一個顔色與窗體背景色相同的上圓，第四部分是顯示百分比的文字。最後将這四個部分疊加起來就得到了我們最終想要得到的控件。
實現過程1.繪制準備
在用戶控件中添加代碼，我們使用事件來繪制控件，通過參數 e 來獲取畫布。并給畫布設置一些屬性。
protectedoverridevoidOnPaint(PaintEventArgse)
{
base.OnPaint(e);
//獲取畫布
Graphicsgraphics=e.Graphics;
//消除鋸齒
graphics.SmoothingMode=SmoothingMode.AntiAlias;
//文字顯示效果
graphics.TextRenderingHint=System.Drawing.Text.TextRenderingHint.ClearTypeGridFit;
//插補模式
graphics.InterpolationMode=InterpolationMode.HighQualityBicubic;
//圖片呈現質量
graphics.CompositingQuality=CompositingQuality.HighQuality;
}
2.繪制底圓
我們在事件中繼續添加一些代碼，使用畫布的（）方法繪制一個底圓，底圓的大小依照整個控件的大小創建。
//繪制底圓
SolidBrushbrush1=newSolidBrush(Color.FromArgb(93,107,153));
Rectanglerectangle1=newRectangle(1,1,this.Width-2,this.Height-2);
graphics.FillEllipse(brush1,rectangle1);
測試效果如下:
3.繪制扇形
首先創建屬性與字段，以便使用屬性來控制扇形的區域，使得扇形的區域是可變的。
//最大值
privatefloatmaxValue=100;
publicfloatMaxValue
{
get{returnmaxValue;}
set
{
maxValue=value;
this.Invalidate();
}
}
//實際值
privatefloatactureValue=60;
publicfloatActureValue
{
get{returnactureValue;}
set
{
actureValue=value;
this.Invalidate();
}
}
//文字顯示值
privatefloatPercentVal=0;
繪制扇形的大小與底圓的大小相一緻，顔色采用漸變色。
//繪制扇形
Rectanglerectangle2=newRectangle(1,1,this.Width-2,this.Height-2);
LinearGradientBrushbrush2=newLinearGradientBrush(rectangle2,Color.Blue,Color.Red,150.0f,true);
this.PercentVal=(ActureValue/MaxValue)*100;
graphics.FillPie(brush2,rectangle2,-90,(ActureValue/MaxValue)*360f);
測試效果如下:
4.繪制上圓
繪制上圓比較簡單，大小比底圓稍小，位置在整個控件中心，顔色與控件顔色相同。
//繪制上圓
SolidBrushsolidBrushElipse=newSolidBrush(this.BackColor);
Rectanglerectangle3=newRectangle(15,15,this.Width-30,this.Height-30);
graphics.FillEllipse(solidBrushElipse,rectangle3);
測試效果如下:
5.繪制文字
最後在控件的中心位置繪制文字
//繪制文字
Fontfont=newFont("華為宋體",14);
PointFpoint=newPointF(((float)this.Width)/2.0f-27,((float)this.Height)/2.0f-10);
graphics.DrawString(this.PercentVal.ToString("0.0")+"%",font,Brushes.Coral,point);
測試效果如下:
總結
經過大緻五個步驟就可以使用GDI+的方式來繪制出一個好看的顯示百分比的環形控件，希望可以給大家一些啟發。
你可能想看：
最新文章
-
恒順：中國“亨氏”的百年曆程
13分鐘前 -
六壬神課占陰陽宅吉兇實例分析
34分鐘前 -
為了帶兩隻流浪狗回國，男子拒絕大使館專機，騎自行車輾轉40天……
49分鐘前 -
狗狗即将被安樂死，但這個小女孩的到來，卻成為了它的一束光……
1小時前 -
中國制造就是這麼牛！連中12槍都沒死，老外拆解後替中國打廣告
1小時前 -
征服中年女人的好方法：少聯系，多做事
2小時前 -
問情問婚（46）
2小時前 -
真正的股神隻需要反複做好兩件事-頭條網
2小時前
熱門文章
-
解郁安神顆粒：抑郁症、焦慮症都是因為肝的疏洩功能出現了失調
1周前 -
有一種痛苦叫牙疼，有種止疼藥叫艾灸！收藏起來，以備不時之需！
1周前 -
僅一味中藥就可以降血糖 ，一味中藥的單藥方！
1周前 -
中醫教你：看指甲上的月牙診病
1周前 -
揭秘：傷寒汗出病解的方式有哪些
1周前 -
中藥方論（24）
1周前 -
（原創）顫證的經方治療案。。。
1周前 -
洗髓修煉中的：找病、攻病、翻病、愈病！
1周前
有話要說...