手把手教你開發(fā)圓盤儀表控件

創(chuàng)建項(xiàng)目自定義控件庫其實(shí)本質(zhì)上就是一個(gè)類庫，所以我們在創(chuàng)建項(xiàng)目時(shí)直接創(chuàng)建類庫項(xiàng)目。在創(chuàng)建好的類庫項(xiàng)目中添加“用戶控件”。實(shí)現(xiàn)思路整個(gè)控件其實(shí)是由四個(gè)部分組成的。第一個(gè)部分為一個(gè)固定顏色的底圓，第二部分是一個(gè)漸變色的扇形，第三部分是一個(gè)顏色與窗體背景色相同的上圓，第四部分是顯示百分比的文字。最后將這四個(gè)部分疊加起來就得到了我們最終想要得到的控件。實(shí)現(xiàn)過程1.繪制準(zhǔn)備在用戶控件中添加代碼，我們使用OnPaint事件來繪制控件，通過參數(shù)e來獲取畫布。并給畫布設(shè)置一些屬性。protectedoverridevoidOnPaint(PaintEventArgse)

{

base.OnPaint(e);

//

獲取畫布

Graphicsgraphics

=

e.Graphics;

//消除鋸齒

graphics.SmoothingMode

=

SmoothingMode.AntiAlias;

//文字顯示效果

graphics.TextRenderingHint

=

System.Drawing.Text.TextRenderingHint.ClearTypeGridFit;

//插補(bǔ)模式

graphics.InterpolationMode

=

InterpolationMode.HighQualityBicubic;

//圖片呈現(xiàn)質(zhì)量

graphics.CompositingQuality

=

CompositingQuality.HighQuality;

}2.繪制底圓我們在事件中繼續(xù)添加一些代碼，使用畫布的FillEllipse（）方法繪制一個(gè)底圓，底圓的大小依照整個(gè)控件的大小創(chuàng)建。//

繪制底圓

SolidBrushbrush1

=

newSolidBrush(Color.FromArgb(93,

107,

153));

Rectanglerectangle1

=

newRectangle(1,

1,

this.Width

-

2,

this.Height

-

2);

graphics.FillEllipse(brush1,

rectangle1);測試效果如下:3.繪制扇形首先創(chuàng)建屬性與字段，以便使用屬性來控制扇形的區(qū)域，使得扇形的區(qū)域是可變的。//最大值

private

float

maxValue

=

100;

public

float

MaxValue

{

get

{

return

maxValue;

}

set

{

maxValue

=

value;

this.Invalidate();

}

}

//實(shí)際值

private

float

actureValue

=

60;

public

float

ActureValue

{

get

{

return

actureValue;

}

set

{

actureValue

=

value;

this.Invalidate();

}

}

//文字顯示值

private

float

PercentVal

=

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.繪制上圓繪制上圓比較簡單，大小比底圓稍小，位置在整個(gè)控件中心，顏色與控件顏色相同。//繪制上圓

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.