当前位置：网站首页>[C＃] （原創）一步一步教你自定義控制元件——04，ProgressBar（進度條）
[C＃] （原創）一步一步教你自定義控制元件——04，ProgressBar（進度條）
2020-11-06 01:35:00 【itread01】
一、前言
技術沒有先進與落後，只有合適與不合適。
本篇的自定義控制元件是：進度條（ProgressBar）。
進度條的實現方式多種多樣，主流的方式有：使用多張圖片去實現、使用1個或2個Panel放到UserControl上去實現、過載系統進度條去實現等等。
本次所實現的進度條仍是使用GDI+去實現。當然，如果只是實現最基本的扁平化的進度條，那完全不需要再寫本篇文章，因為直接小改下第一篇的LTrackBar就行了。
既然寫這篇文章，就是實現不一樣的、比較好玩和好看的進度條，如環形進度條、餅形進度條等等。
本篇使用的知識都是前幾篇中已經講過的，並沒有新的技術。但是卻附加了一些想像力，一些不拘一格、稍稍突破常規的想像力。
相信看完的你，一定會有所收穫。
本文地址：https://www.cnblogs.com/lesliexin/p/13575517.html
二、前期分析
（一）為什麼需要自定義進度條？
系統自帶的滾動條樣式太過單調，同時不夠“扁平化”，所以便去實現自己的滾動條。
（二）實現目標
1，支援三種樣式
（1）橫條（Bar）
（2）圓餅（Pie）
（3）圓弧（Arc）
2，支援顯示和隱藏百分比
（1）橫條（Bar）
（2）圓餅（Pie）
（3）圓弧（Arc）
3，支援多種進度形狀
（1）連續
（2）分段塊
（3）兩段式：先分段塊再連續
（4）螺旋
（注：只有“橫條”樣式時才支援螺旋形狀）
4，支援Marquee樣式
當進度無法確定時，便需要使用Marquee樣式，同系統進度條的“Marquee”樣式類似。
不過支援更多的Marquee樣式。
（1）左右擺動
（2）迴圈穿過
（3）往復（連續）
（4）劃過（連續）
（5）往復（分段塊）
（6）劃過（分段塊）
（7）螺旋
5，支援調整進度條各元素尺寸和顏色
（1）設定邊框厚度和顏色
（2）設定背景大小和顏色
（3）設定進度繪製位置和顏色
（4）設定進度文字顏色
（5）設定弧線厚度（僅樣式為“圓弧（Arc）”時有效）
（6）設定“分段塊”厚度（僅進度條形狀為“分段塊”時有效）
三、進度條拆解
看了上面的實現目標，是不是感覺眼花繚亂、無從下手？
下面我就對進度條進行拆分講解，一步一步來看上面的效果是怎麼實現的。
（一）組成元素
進度條由三個部分組成，分別是：進度、邊框、背景。
下面是各種樣式下，三個組成部分的拆分。
1，橫條（Bar）
2，圓餅（Pie）
3，圓弧（Arc）
（二）元素屬性
進度條的三個組成元素，都有著各自相關的屬性。
（注：因為“顏色”屬性是必備的，所以不再贅述。）
1，邊框
其相關屬性為：邊框的厚度。
當“厚度”為0時，看起來進度條就沒有邊框；
當“厚度”超過控制元件高度的二分之一時，整個進度條就變成了邊框的顏色。
（注：因為是先繪製“背景”，再繪製“邊框”，所以是“整個進度條變成邊框的顏色”）
A，對於 “橫條（Bar）”，其邊框厚度如下圖所示：
B，對於“圓餅（Pie）”、“圓弧（Arc）”，其邊框厚度如下圖所示：
2，背景
其相關屬性為：背景的大小
背景的大小就是背景繪製的範圍，這裡用一個自造詞“收縮寬度”來進行描述。
當“收縮寬度”為0時，背景大小＝控制元件本身大小；
當“收縮寬度”為x時，背景寬度＝控制元件寬度－2*x，背景高度＝控制元件高度－2*x；
當“收縮寬度”超過控制元件高度的二分之一時，背景高度＝控制元件高度－2*（控制元件高度/2）＝0，此時進度條將沒有了背景。
A，對於 “橫條（Bar）”，其收縮寬度如下圖所示：
B，對於“圓餅（Pie）”、“圓弧（Arc）”，其收縮寬度如下圖所示：
3，進度
其相關屬性有：進度繪製範圍、進度樣式
A，進度繪製範圍
顧名思義，就是進度可繪製的範圍，這裡用“繪製邊框距離”來進行描述。
當“繪製邊框距離”為0時，進度的繪製範圍＝控制元件本身大小；
當“繪製邊框距離”為x時，進度的繪製起點：（x,x），繪製終點：（控制元件寬度－x，控制元件高度－x），所以繪製範圍＝（控制元件寬度－2*x，控制元件高度－2*x）；
當“繪製邊框距離”超過控制元件高度的二分之一時，進度的繪製高度將為0，也代表著沒有進度。
A，對於 “橫條（Bar）”，其繪製邊框距離如下圖所示：
B，對於“圓餅（Pie）”，其繪製邊框距離如下圖所示：
C，對於“圓弧（Arc）”，其繪製邊框距離如下圖所示：
B，進度樣式
進度樣式就是前節實現目標中各種進度的樣式，有連續的、有分段塊的、有螺旋的等等。
這此樣式大部分一看都知道如何實現的。
比如“連續”，在“橫條（Bar）”樣式中，就是填充一個矩形；在“圓餅（Pie）”中，就是填充一個扇形；在“圓弧（Arc）”中，就是畫一段弧線。
比如“分段塊”，在“橫條（Bar）”樣式中，就是等間隔填充多個矩形；在“圓餅（Pie）”中，就是等間隔填充一個扇形；在“圓弧（Arc）”中，就是等間隔畫一段弧線。
在這裡，我將詳細講解一個特殊的形狀：“螺旋”，因為“螺旋”樣式除了不太能直觀想像出來之外，還有不少細節需要處理。
因為只有“橫條（Bar）”樣式進度條有“螺旋”樣式，所以接下來的講解都是以“橫條（Bar）”為基礎進行講解的。
同時，為了避免干擾，前面的兩個屬性“邊框”和“背景”都將保持預設值，即：沒有邊框，背景大小＝控制元件大小。“進度繪製範圍”也是預設值，即繪製範圍＝控制元件大小。
（1）“螺旋”樣式實現講解
A，進度明確時
即進度是已知且確定的，比如5%，33%等等。其外觀樣式如下：
其示意圖如下：
其中藍色的平行四邊形就是“螺旋”，其本身是一個背景透明、上有多個藍色平行四邊形的圖片。
進度的增減實質上就是這個圖片在控制元件上的左右移動。
那麼，這個圖片要和控制元件大小相等，特別是寬度相等。但是在使用GDI+去生成這個圖片時，卻不能讓圖片寬度與控制元件寬度相等。
我們在往圖片繪製平行四邊行時，是從右往左依次繪製的，之所以從右側開始繪製，是為了保證進度條的右側樣式是固定的，固定在一個比較美觀的狀態。因為在進度變化時，即圖片左右移動時，我們目光的焦點是在右側，所以一個固定的右側樣式就比較重要，否則當控制元件寬度變化時，右側的樣式就隨之變化。
當圖片寬度與控制元件寬度相等時，會出現下面這種情況，即進度條的最右側下方有空白。如下圖所示：
（其中上面圖形是實際繪製圖片，下面圖形是將圖片擷取，和進度條寬度相等後樣式）
所以我們令圖片的寬度＝控制元件的寬度+1個平行四邊行的寬度。在繪製完圖片後，我們從中截取出一個和控制元件寬度一樣的圖片，這樣，整體的樣式就比較好看。如下圖所示：
（其中上面圖形是實際繪製圖片，下面圖形是將圖片擷取，和進度條寬度相等後樣式）
綜上，就是按照下圖所示的5步依次實現：
B，進度未知時
即進度是不確定的，就像系統進度條的Marquee樣式那樣。其外觀樣式如下：
同上，上方仍是一個背景透明、上有多個藍色平行四邊形的圖片。上圖的效果就是這個圖片在不段的迴圈移動。
具體示意如下，圖片不斷向右側移動，當右側超過一個平等四邊行時，圖片恢復原位，然後不斷迴圈。
通過上方的示意圖，我們發現一個特點，就是圖片的寬度不再等於（控制元件的寬度+1個平行四邊行的寬度），而是等於（控制元件的寬度+2個平行四邊行的寬度）。原因如下：
在畫示意圖時，為了方便直觀檢視，平行四邊形正好是兩個相對的直角三角行，而實際繪製時，很少會有這種樣式，大多都是兩個相對的鈍角三角行組成的平等四邊形的樣子，如下圖所示：
這種情況下，如果圖片的寬度＝控制元件的寬度+1個平行四邊行的寬度，那麼在移動到最右側時和復位時都會出現額外的空白，如下圖所示：
所以，才會令：圖片的寬度＝控制元件的寬度+2個平行四邊行的寬度。
（三）其它屬性
除了前面的與進度條元素直接相關的屬性外，還有一些其他屬性，這些屬性都是在某種特定樣式下才起有作用。
1，弧線寬度
在“圓弧（Arc）”樣式的進度條中，“進度”就是一段圓弧，所以在其他屬性外，還要有“弧線本身寬度”這樣一個屬性。
在預設情況下，弧線寬度＝控制元件寬度/10，因為當進度達到100%時，弧線就變成了圓環，此時看起來有弧線的地方佔控制元件寬度的五分之一，是一個比較常規的寬度。
通過呼叫弧線寬度，可以實現一些特殊的效果。
2，分段塊寬度
在進度樣式為“分段塊”時，為了支援不同的分段寬度，所以要有本屬性。
為了繪製出更好的效果，“分段塊寬度”不僅僅是有顏色的那部分的寬度，而是為：有顏色部分的寬度+兩個顏色間隔。
經過除錯，發現當（顏色：間隔＝2：1）時，外觀比較好看和自然。
所以，一個“分段塊寬度”＝2/3有顏色寬度+1/3無顏色寬度。
因為“橫條（Bar）”、“圓餅（Pie）”、“圓弧（Arc）”都支援“分段塊”。所以在“橫條（Bar）”中，“分段塊寬度”指的就是寬度；而在“圓餅（Pie）”、“圓弧（Arc）”中，“分段塊寬度”指的是角度。
四、開始實現
（一）前期準備。
此處僅作提綱，具體操作見前篇。
新建類：LProgressBar.cs
新增繼承：Control（需要新增引用：System.Windows.Forms.dll）
修改可訪問性為：public
（二）新增屬性
1，進度值
進度值指的是當前的進度，這裡將進度範圍固定為：0~100。
這樣的好處是方便計算和繪製，使用時也更加直觀。
2，邊框厚度
詳細見前節中的講解。
（注：我是先寫完的程式碼，然後再寫文章，有時在寫文章時會發現屬性的命名不太正規，比如“邊框厚度”這個屬性，用“BorderSize”更好，但是我在寫程式碼時我想的是“環繞一圈的線”，所以就成了下面圖中的“SurroundLineSize”，但是在寫文章時發現不好描述，就改成了“邊框厚度”，不過再去修改程式碼意義不大，重要的是技術思想本身。下同。）
3，邊框顏色
顧名思義，就是邊框的顏色。
4，背景收縮寬度
詳細見前節中的講解。
5，背景顏色
6，進度繪製範圍邊緣
詳細見前節中的講解。
7，弧線厚度
詳細見前節中的講解。
8， 進度顏色
進度顏色是進度本身的顏色。
9，分段塊寬度
詳細見前節中的講解。
10，進度樣式
進度樣式描述的是進度本身的外觀，如連續、分段塊、螺旋等等。
進度樣式是一個列舉，明細如下：
11，進度條型別
進度條型別指的是進度條的樣式外觀，如橫條、圓餅、圓弧等。
進度條型別是一個列舉，明細如下：
12，進度條模式
進度模式指的進度是明確的還是不明確的。
進度明確，比如當前進度是1%、45%等等。
進度不明確，比如載入某個檔案時一直在載入，但不知道載入了多少。也就是系統進度條的Marquee樣式。
進度條模式是一個列舉，明細如下：
13，Marquee迴圈一遍時間
Marquee樣式時動畫的快慢。
14，Marquees樣式
Marquee樣式動畫。
該屬性是一個列舉，明細如下：
15，Marquee型別
Marquee樣式同樣是動畫，所以支援勻速和緩入緩出效果。
該屬性是一個列舉，明細如下：
16，進度文字型別
可以設定進度條是否顯示文字，以及是否顯示百分比。
該屬性是一個列舉，明細如下：
17，進度文字顏色
18，建構函式
這裡的建構函式中，除了使用了之前文章中固定的“雙緩衝”外，還額外設定了幾個屬性，這幾個屬性是為了讓控制元件支援透明，所以下面才可以令背景色和前景色為透明色。
這種情況下，整個控制元件就相當於一個完全透明的畫布，可以任由我們繪製。
（三）重寫方法
對於本進度條而言，只是用來指示進度資訊，所以不需要事件。只需要重寫最基本的OnPaint方法就行了。
不過，由於在OnPaint中要繪製的樣式以及型別太多，所以程式碼量較大，但是程式碼難度不大。我會先將OnPaint程式碼全部放上，然後著重講一下實現的原理。
而Marquee樣式本質上就是一個動畫效果，迴圈的繪製一些圖形或改變圖形的大小位置，所以我們使用一個定時器來進行觸發，定時的改變圖形或圖形大小位置。
protected override void OnPaint(PaintEventArgs e)
{
base.OnPaint(e);
e.Graphics.SmoothingMode = SmoothingMode.HighQuality;
//進度實際繪製寬度、高度
float fRealWidth = Width - _DrawMargin * 2;
float fRealHeight = Height - _DrawMargin * 2;
float fRealLeftTop = _DrawMargin - 0.5f;
if (fRealLeftTop < 0) fRealLeftTop = 0;
//上下左右各留0.5個畫素，防止切邊
bool bDrawSurroundLine = _SurroundLineSize > 0 ? true : false;
bool bDrawInner = _ShrinkSize * 2 < Math.Min(Width, Height) ? true : false;
float fSurroundLineSizeF = Convert.ToSingle(_SurroundLineSize);
RectangleF rectInner = new RectangleF(_ShrinkSize, _ShrinkSize, (Width - 1) - _ShrinkSize * 2, (Height - 1) - _ShrinkSize * 2);
RectangleF retcSurrondLine = new RectangleF(fSurroundLineSizeF / 2, fSurroundLineSizeF / 2, (Width - 1) - fSurroundLineSizeF, (Height - 1) - fSurroundLineSizeF);
//弧線寬度為總寬度的十分之一，因為是圓弧，所以最終看起來是五分之一
float fSurroundArcSize = _ArcSize > 0 ? _ArcSize : Width / 10;
RectangleF retcSurrondArc = new RectangleF(fSurroundArcSize / 2 + fRealLeftTop, fSurroundArcSize / 2 + fRealLeftTop, (fRealWidth - 1) - fSurroundArcSize, (fRealHeight - 1) - fSurroundArcSize);
SolidBrush sbInner = new SolidBrush(_ShrinkColor);
SolidBrush sbFore = new SolidBrush(L_SliderColor);
SolidBrush sbText = new SolidBrush(_TextColor);
Pen penSurrondLine = new Pen(_SurroundLineColor, fSurroundLineSizeF);
Pen penSurroundArc = new Pen(L_SliderColor, fSurroundArcSize);
//滑塊寬度為總寬度的五分之一
float fSlider = Convert.ToSingle(fRealWidth) / 5;
if (_ProgressType != ProgressType.Bar)
{
//360/5
fSlider = 72;
}
float fRange = 0;
if (L_MarqueeStyle == MarqueeStyle.Swing) fRange = fRealWidth - fSlider;
else if (L_MarqueeStyle == MarqueeStyle.Cross) fRange = fRealWidth + fSlider;
else fRange = fRealWidth;
float fBlockSize = _BlockSize;
if (fBlockSize < 3) fBlockSize = 3.0f;
if (_ProgressType == ProgressType.Bar)
{
if (fBlockSize > fRealWidth) fBlockSize = fRealWidth;
}
else
{
if (fBlockSize > 360.0f) fBlockSize = 360.0f;
}
#region Bar
if (_ProgressType == ProgressType.Bar)
{
//畫內部
if (bDrawInner)
{
e.Graphics.FillRectangle(sbInner, rectInner);
}
//畫線
if (bDrawSurroundLine)
{
e.Graphics.DrawRectangle(penSurrondLine, retcSurrondLine.X, retcSurrondLine.Y, retcSurrondLine.Width, retcSurrondLine.Height);
}
if (_ProgressMode == ProgressMode.Known)
{
#region Continuous
if (_ProgressStyle == ProgressStyle.Continuous)
{
//畫進度
float fProgress = Convert.ToSingle(_Value) * fRealWidth / 100;
e.Graphics.FillRectangle(sbFore, _DrawMargin - 0.5f, fRealLeftTop, fProgress, fRealHeight);
}
#endregion
#region Blocks
else if (_ProgressStyle == ProgressStyle.Blocks)
{
//獲取方塊數
float fBlocks = Convert.ToSingle(fRealWidth) / fBlockSize;
int iShowBlocks = Convert.ToInt32(fBlocks * _Value / 100);
//畫進度
for (int i = 0; i < iShowBlocks; i++)
{
e.Graphics.FillRectangle(sbFore, i * fBlockSize + fRealLeftTop, fRealLeftTop, fBlockSize * 2 / 3, fRealHeight);
}
}
#endregion
#region Helical
else if (_ProgressStyle == ProgressStyle.Helical)
{
float fProgress = Convert.ToSingle(_Value) * fRealWidth / 100;
//這裡為了獲得更好看的效果，要多加1個Block
float fBmpWidth = fRealWidth + fBlockSize;
float fBlocks = fBmpWidth / fBlockSize;
Bitmap bmp = new Bitmap(Convert.ToInt32(fBmpWidth), Convert.ToInt32(fRealHeight));
GraphicsPath gp = new GraphicsPath();
for (int i = 0; i < fBlocks; i++)
{
gp.AddPolygon(new PointF[]
{
//top-right
new PointF(fBmpWidth - i * fBlockSize ,0),
//bottom-right
new PointF(fBmpWidth - i * fBlockSize - fBlockSize,fRealHeight),
//bottom-left
new PointF(fBmpWidth - i * fBlockSize - fBlockSize*5/3,fRealHeight),
//top-left
new PointF(fBmpWidth - i * fBlockSize - fBlockSize*2/3,0),
});
gp.CloseFigure();
}
gp.CloseAllFigures();
Graphics g = Graphics.FromImage(bmp);
g.SmoothingMode = SmoothingMode.HighQuality;
g.FillPath(sbFore, gp);
gp.Dispose();
g.Dispose();
e.Graphics.DrawImage(bmp, new RectangleF(fRealLeftTop, fRealLeftTop, fProgress, fRealHeight), new RectangleF(bmp.Width - fProgress - fBlockSize, 0, fProgress, bmp.Height), GraphicsUnit.Pixel);
bmp.Dispose();
}
#endregion
#region BlocksToContinuous
else if (_ProgressStyle == ProgressStyle.BlocksToContinuous)
{
float fBlocks = Convert.ToSingle(fRealWidth) / fBlockSize;
if (_Value <= 50)
{
int iShowBlocks = Convert.ToInt32(fBlocks * _Value * 2 / 100);
//畫進度
for (int i = 0; i < iShowBlocks; i++)
{
e.Graphics.FillRectangle(sbFore, i * fBlockSize + fRealLeftTop, fRealLeftTop, fBlockSize * 2 / 3, fRealHeight);
}
}
else
{
int iShowBlocks = Convert.ToInt32(fBlocks * ((_Value - 50f) * 2 / 100));
for (int i = iShowBlocks; i < Convert.ToInt32(fBlocks); i++)
{
e.Graphics.FillRectangle(sbFore, i * fBlockSize + fRealLeftTop, fRealLeftTop, fBlockSize * 2 / 3, fRealHeight);
}
//畫進度
float fProgress = Convert.ToSingle((_Value - 50) * 2) * fRealWidth / 100;
e.Graphics.FillRectangle(sbFore, fRealLeftTop, fRealLeftTop, fProgress, fRealHeight);
}
}
#endregion
}
else
{
#region Marquee
if (_ProgressStyle == ProgressStyle.Marquee)
{
if (L_MarqueeType == MarqueeType.SlowInSlowOut)
{
if (L_MarqueeStyle == MarqueeStyle.Swing)
{
double fz = fRange * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2;
e.Graphics.FillRectangle(sbFore, Convert.ToSingle(fz) + fRealLeftTop, fRealLeftTop, fSlider, fRealHeight);
}
else if (L_MarqueeStyle == MarqueeStyle.Cross)
{
double fz = fRange * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2 - fSlider;
float fz2 = Convert.ToSingle(fz) + fRealLeftTop;
float fW = fSlider;
if (fz2 < fRealLeftTop)
{
fW = fz2 + fSlider - (fRealLeftTop);
fz2 = fRealLeftTop;
}
if (fz2 + fSlider > Width - (fRealLeftTop))
{
fW = Width - (fRealLeftTop) - fz2;
}
e.Graphics.FillRectangle(sbFore, fz2, fRealLeftTop, fW, fRealHeight);
}
else if (L_MarqueeStyle == MarqueeStyle.Reciprocation_Continuous)
{
double fz = fRange * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2;
e.Graphics.FillRectangle(sbFore, fRealLeftTop, fRealLeftTop, Convert.ToSingle(fz), fRealHeight);
}
else if (L_MarqueeStyle == MarqueeStyle.Across_Continuous)
{
double fz = fRange * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2;
if (!bAcrossed)
{
e.Graphics.FillRectangle(sbFore, fRealLeftTop, fRealLeftTop, Convert.ToSingle(fz), fRealHeight);
}
else
{
e.Graphics.FillRectangle(sbFore, Convert.ToSingle(fz) + fRealLeftTop, fRealLeftTop, fRealWidth - Convert.ToSingle(fz), fRealHeight);
}
}
else if (L_MarqueeStyle == MarqueeStyle.Reciprocation_Blocks)
{
double fz = fRange * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2;
float fBlocks = Convert.ToSingle(fRealWidth) / fBlockSize;
float fNowBlocks = Convert.ToSingle(fz) / fBlockSize;
for (int i = 0; i < fNowBlocks; i++)
{
e.Graphics.FillRectangle(sbFore, i * fBlockSize + fRealLeftTop, fRealLeftTop, fBlockSize * 2 / 3, fRealHeight);
}
}
else
{
double fz = fRange * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2;
float fBlocks = Convert.ToSingle(fRealWidth) / fBlockSize;
float fNowBlocks = Convert.ToSingle(fz) / fBlockSize;
if (!bAcrossed)
{
for (int i = 0; i < fNowBlocks; i++)
{
e.Graphics.FillRectangle(sbFore, i * fBlockSize + fRealLeftTop, fRealLeftTop, fBlockSize * 2 / 3, fRealHeight);
}
}
else
{
for (int i = Convert.ToInt32(fNowBlocks); i < fBlocks; i++)
{
e.Graphics.FillRectangle(sbFore, i * fBlockSize + fRealLeftTop, fRealLeftTop, fBlockSize * 2 / 3, fRealHeight);
}
}
}
}
else
{
if (L_MarqueeStyle == MarqueeStyle.Swing)
{
e.Graphics.FillRectangle(sbFore, Convert.ToSingle(dMarqueeValue) + fRealLeftTop, fRealLeftTop, fSlider, fRealHeight);
}
else if (L_MarqueeStyle == MarqueeStyle.Cross)
{
float fz2 = Convert.ToSingle(dMarqueeValue) + fRealLeftTop;
float fW = fSlider;
if (fz2 < fRealLeftTop)
{
fW = fz2 + fSlider - (fRealLeftTop);
fz2 = fRealLeftTop;
}
if (fz2 + fSlider > Width - (fRealLeftTop))
{
fW = Width - (fRealLeftTop) - fz2;
}
e.Graphics.FillRectangle(sbFore, fz2, fRealLeftTop, fW, fRealHeight);
}
else if (L_MarqueeStyle == MarqueeStyle.Reciprocation_Continuous)
{
e.Graphics.FillRectangle(sbFore, fRealLeftTop, fRealLeftTop, Convert.ToSingle(dMarqueeValue), fRealHeight);
}
else if (L_MarqueeStyle == MarqueeStyle.Across_Continuous)
{
if (!bAcrossed)
{
e.Graphics.FillRectangle(sbFore, fRealLeftTop, fRealLeftTop, Convert.ToSingle(dMarqueeValue), fRealHeight);
}
else
{
e.Graphics.FillRectangle(sbFore, Convert.ToSingle(dMarqueeValue) + fRealLeftTop, fRealLeftTop, fRealWidth - Convert.ToSingle(dMarqueeValue), fRealHeight);
}
}
else if (L_MarqueeStyle == MarqueeStyle.Reciprocation_Blocks)
{
float fBlocks = Convert.ToSingle(fRealWidth) / fBlockSize;
float fNowBlocks = Convert.ToSingle(dMarqueeValue) / fBlockSize;
for (int i = 0; i < fNowBlocks; i++)
{
e.Graphics.FillRectangle(sbFore, i * fBlockSize + fRealLeftTop, fRealLeftTop, fBlockSize * 2 / 3, fRealHeight);
}
}
else
{
float fBlocks = Convert.ToSingle(fRealWidth) / fBlockSize;
float fNowBlocks = Convert.ToSingle(dMarqueeValue) / fBlockSize;
if (!bAcrossed)
{
for (int i = 0; i < fNowBlocks; i++)
{
e.Graphics.FillRectangle(sbFore, i * fBlockSize + fRealLeftTop, fRealLeftTop, fBlockSize * 2 / 3, fRealHeight);
}
}
else
{
for (int i = Convert.ToInt32(fNowBlocks); i < fBlocks; i++)
{
e.Graphics.FillRectangle(sbFore, i * fBlockSize + fRealLeftTop, fRealLeftTop, fBlockSize * 2 / 3, fRealHeight);
}
}
}
}
}
#endregion
#region Helical
else if (_ProgressStyle == ProgressStyle.Helical)
{
//這裡為了獲得更好看的效果，要多加2個Block
float fBmpWidth = fRealWidth + fBlockSize*2;
float fBlocks = fBmpWidth / fBlockSize;
Bitmap bmp = new Bitmap(Convert.ToInt32(fBmpWidth), Convert.ToInt32(fRealHeight));
GraphicsPath gp = new GraphicsPath();
for (int i = 0; i < fBlocks; i++)
{
gp.AddPolygon(new PointF[]
{
//top-right
new PointF(fBmpWidth - i * fBlockSize ,0),
//bottom-right
new PointF(fBmpWidth - i * fBlockSize - fBlockSize,fRealHeight),
//bottom-left
new PointF(fBmpWidth - i * fBlockSize - fBlockSize*5/3,fRealHeight),
//top-left
new PointF(fBmpWidth - i * fBlockSize - fBlockSize*2/3,0),
});
gp.CloseFigure();
}
gp.CloseAllFigures();
Graphics g = Graphics.FromImage(bmp);
g.SmoothingMode = SmoothingMode.HighQuality;
g.FillPath(sbFore, gp);
gp.Dispose();
g.Dispose();
e.Graphics.DrawImage(bmp, new RectangleF(fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight), new RectangleF(Convert.ToSingle(dMarqueeValue) + fBlockSize, 0, fRealWidth, bmp.Height), GraphicsUnit.Pixel);
bmp.Dispose();
}
#endregion
}
}
#endregion
#region Arc
else if (_ProgressType == ProgressType.Arc)
{
//畫內部
if (bDrawInner)
{
e.Graphics.FillEllipse(sbInner, rectInner);
}
//畫線
if (bDrawSurroundLine)
{
e.Graphics.DrawEllipse(penSurrondLine, retcSurrondLine.X, retcSurrondLine.Y, retcSurrondLine.Width, retcSurrondLine.Height);
}
#region Continuous
if (_ProgressStyle == ProgressStyle.Continuous)
{
float fProgress = Convert.ToSingle(_Value * 3.6);
if (fProgress > 0)
{
e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270, fProgress);
}
}
#endregion
#region Blocks
else if (_ProgressStyle == ProgressStyle.Blocks)
{
//獲取方塊數
float fBlocks = 360.0f / fBlockSize;
int iShowBlocks = Convert.ToInt32(fBlocks * _Value / 100);
//畫進度
for (int i = 0; i < iShowBlocks; i++)
{
//對於DrawArc而言，會產生在超過360度而導致重疊，所以需要判斷，同時使用360-1，以防止相接。
//後續可以再進行優化：如果所分配的不正好是3的倍數，則取一相近值，使其能被3整除。
e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
}
}
#endregion
#region BlocksToContinuous
else if (_ProgressStyle == ProgressStyle.BlocksToContinuous)
{
//獲取方塊數
float fBlocks = 360.0f / fBlockSize;
if (_Value <= 50)
{
int iShowBlocks = Convert.ToInt32(fBlocks * _Value * 2 / 100);
//畫進度
for (int i = 0; i < iShowBlocks; i++)
{
//對於DrawArc而言，會產生在超過360度而導致重疊，所以需要判斷，同時使用360-1，以防止相接。
//後續可以再進行優化：如果所分配的不正好是3的倍數，則取一相近值，使其能被3整除。
e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
}
}
else
{
int iShowBlocks = Convert.ToInt32(fBlocks * (_Value - 50f) * 2 / 100);
//畫進度
for (int i = iShowBlocks; i < Convert.ToInt32(fBlocks); i++)
{
//對於DrawArc而言，會產生在超過360度而導致重疊，所以需要判斷，同時使用360-1，以防止相接。
//後續可以再進行優化：如果所分配的不正好是3的倍數，則取一相近值，使其能被3整除。
e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
}
float fProgress = (_Value - 50f) * 2 * 3.6f;
if (fProgress > 0)
{
e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270, fProgress);
}
}
}
#endregion
#region Marquee
else if (_ProgressStyle == ProgressStyle.Marquee)
{
if (L_MarqueeType == MarqueeType.SlowInSlowOut)
{
if (L_MarqueeStyle == MarqueeStyle.Cross || L_MarqueeStyle == MarqueeStyle.Swing)
{
double fz = 360 * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2 + 270 - fSlider / 2;
e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, Convert.ToSingle(fz), fSlider);
}
else if (L_MarqueeStyle == MarqueeStyle.Across_Continuous)
{
double fz = 360 * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2;
if (!bAcrossed)
{
e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270, Convert.ToSingle(fz));
}
else
{
e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270 + Convert.ToSingle(fz), Convert.ToSingle(360 - fz));
}
}
else if (L_MarqueeStyle == MarqueeStyle.Reciprocation_Continuous)
{
double fz = 360 * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2;
e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270, Convert.ToSingle(fz));
}
else if (L_MarqueeStyle == MarqueeStyle.Across_Blocks)
{
double fz = 360 * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2;
float fBlocks = Convert.ToSingle(fz / fBlockSize);
float fAllBlocks = 360.0f / fBlockSize;
if (!bAcrossed)
{
for (int i = 0; i < fBlocks; i++)
{
e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
}
}
else
{
for (float i = fAllBlocks - 1; i >= fBlocks; i--)
{
e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
}
}
}
else
{
double fz = 360 * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2;
float fBlocks = Convert.ToSingle(fz / fBlockSize);
for (int i = 0; i < fBlocks; i++)
{
e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
}
}
}
else
{
if (L_MarqueeStyle == MarqueeStyle.Cross || L_MarqueeStyle == MarqueeStyle.Swing)
{
e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, Convert.ToSingle(dMarqueeValue), fSlider);
}
else if (L_MarqueeStyle == MarqueeStyle.Across_Continuous)
{
if (!bAcrossed)
{
e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270, Convert.ToSingle(dMarqueeValue));
}
else
{
e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270 + Convert.ToSingle(dMarqueeValue), Convert.ToSingle(360 - dMarqueeValue));
}
}
else if (L_MarqueeStyle == MarqueeStyle.Reciprocation_Continuous)
{
e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270, Convert.ToSingle(dMarqueeValue));
}
else if (L_MarqueeStyle == MarqueeStyle.Across_Blocks)
{
float fBlocks = Convert.ToSingle(dMarqueeValue / fBlockSize);
float fAllBlocks = 360.0f / fBlockSize;
if (!bAcrossed)
{
for (int i = 0; i < fBlocks; i++)
{
e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
}
}
else
{
for (float i = fAllBlocks - 1; i >= fBlocks; i--)
{
e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
}
}
}
else
{
float fBlocks = Convert.ToSingle(dMarqueeValue / fBlockSize);
for (int i = 0; i < fBlocks; i++)
{
e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
}
}
}
}
#endregion
}
#endregion
#region Pie
else if (_ProgressType == ProgressType.Pie)
{
//畫內部
if (bDrawInner)
{
e.Graphics.FillEllipse(sbInner, rectInner);
}
//畫線
if (bDrawSurroundLine)
{
e.Graphics.DrawEllipse(penSurrondLine, retcSurrondLine.X, retcSurrondLine.Y, retcSurrondLine.Width, retcSurrondLine.Height);
}
#region Continuous
if (_ProgressStyle == ProgressStyle.Continuous)
{
//畫進度
//360/100;
float fProgress = Convert.ToSingle(_Value * 3.6);
if (fProgress > 0)
{
//如果不進行fProgress>0的判斷，在設計器調整大小時如果處於其它控制元件上方時會出來異常，導致繪製失敗，雖然仍可以進行編譯和使用。
e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270, fProgress);
}
}
#endregion
#region Blocks
else if (_ProgressStyle == ProgressStyle.Blocks)
{
//獲取方塊數
float fBlocks = 360.0f / fBlockSize;
int iShowBlocks = Convert.ToInt32(fBlocks * _Value / 100);
//畫進度
for (int i = 0; i < iShowBlocks; i++)
{
//對於DrawArc而言，會產生在超過360度而導致重疊，所以需要判斷，同時使用360-1，以防止相接。
//後續可以再進行優化：如果所分配的不正好是3的倍數，則取一相近值，使其能被3整除。
e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
}
}
#endregion
#region
else if (_ProgressStyle == ProgressStyle.BlocksToContinuous)
{
//獲取方塊數
float fBlocks = 360.0f / fBlockSize;
if (_Value <= 50)
{
int iShowBlocks = Convert.ToInt32(fBlocks * _Value * 2 / 100);
//畫進度
for (int i = 0; i < iShowBlocks; i++)
{
//對於DrawArc而言，會產生在超過360度而導致重疊，所以需要判斷，同時使用360-1，以防止相接。
//後續可以再進行優化：如果所分配的不正好是3的倍數，則取一相近值，使其能被3整除。
e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
}
}
else
{
int iShowBlocks = Convert.ToInt32(fBlocks * (_Value - 50f) * 2 / 100);
//畫進度
for (int i = iShowBlocks; i < Convert.ToInt32(fBlocks); i++)
{
//對於DrawArc而言，會產生在超過360度而導致重疊，所以需要判斷，同時使用360-1，以防止相接。
//後續可以再進行優化：如果所分配的不正好是3的倍數，則取一相近值，使其能被3整除。
e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
}
//畫進度
//360/100;
float fProgress = (_Value - 50f) * 2 * 3.6f;
if (fProgress > 0)
{
//如果不進行fProgress>0的判斷，在設計器調整大小時如果處於其它控制元件上方時會出來異常，導致繪製失敗，雖然仍可以進行編譯和使用。
e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270, fProgress);
}
}
}
#endregion
#region Marquee
else if (_ProgressStyle == ProgressStyle.Marquee)
{
if (L_MarqueeType == MarqueeType.SlowInSlowOut)
{
if (L_MarqueeStyle == MarqueeStyle.Cross || L_MarqueeStyle == MarqueeStyle.Swing)
{
double fz = 360 * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2 + 270 - fSlider / 2;
e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, Convert.ToSingle(fz), fSlider);
}
else if (L_MarqueeStyle == MarqueeStyle.Across_Continuous)
{
double fz = 360 * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2;
if (!bAcrossed)
{
e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270, Convert.ToSingle(fz));
}
else
{
e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270 + Convert.ToSingle(fz), Convert.ToSingle(360 - fz));
}
}
else if (L_MarqueeStyle == MarqueeStyle.Reciprocation_Continuous)
{
double fz = 360 * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2;
e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270, Convert.ToSingle(fz));
}
else if (L_MarqueeStyle == MarqueeStyle.Across_Blocks)
{
double fz = 360 * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2;
float fBlocks = Convert.ToSingle(fz / fBlockSize);
float fAllBlocks = 360.0f / fBlockSize;
if (!bAcrossed)
{
for (int i = 0; i < fBlocks; i++)
{
e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
}
}
else
{
for (float i = fAllBlocks - 1; i >= fBlocks; i--)
{
e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
}
}
}
else
{
double fz = 360 * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2;
float fBlocks = Convert.ToSingle(fz / fBlockSize);
for (int i = 0; i < fBlocks; i++)
{
e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
}
}
}
else
{
if (L_MarqueeStyle == MarqueeStyle.Cross || L_MarqueeStyle == MarqueeStyle.Swing)
{
e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, Convert.ToSingle(dMarqueeValue), fSlider);
}
else if (L_MarqueeStyle == MarqueeStyle.Across_Continuous)
{
if (!bAcrossed)
{
e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270, Convert.ToSingle(dMarqueeValue));
}
else
{
e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270 + Convert.ToSingle(dMarqueeValue), Convert.ToSingle(360 - dMarqueeValue));
}
}
else if (L_MarqueeStyle == MarqueeStyle.Reciprocation_Continuous)
{
e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270, Convert.ToSingle(dMarqueeValue));
}
else if (L_MarqueeStyle == MarqueeStyle.Across_Blocks)
{
float fBlocks = Convert.ToSingle(dMarqueeValue / fBlockSize);
float fAllBlocks = 360.0f / fBlockSize;
if (!bAcrossed)
{
for (int i = 0; i < fBlocks; i++)
{
e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
}
}
else
{
for (float i = fAllBlocks - 1; i >= fBlocks; i--)
{
e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
}
}
}
else
{
float fBlocks = Convert.ToSingle(dMarqueeValue / fBlockSize);
for (int i = 0; i < fBlocks; i++)
{
e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
}
}
}
}
#endregion
}
#endregion
#region Text
if (_ProgressText != ProgressText.None)
{
if (_ProgressStyle != ProgressStyle.Marquee)
{
string sText = _ProgressText == ProgressText.Number ? _Value.ToString() : _Value.ToString() + "%";
SizeF sizeText = e.Graphics.MeasureString(sText, Font);
float fx = (Width - sizeText.Width) / 2f;
float fy = (Height - sizeText.Height) / 2f;
e.Graphics.DrawString(sText, Font, _TextColor == Color.Empty ? sbFore : sbText, fx, fy);
}
}
#endregion
sbInner.Dispose();
sbFore.Dispose();
sbText.Dispose();
}
private void TTimer_Tick(object sender, EventArgs e)
{
//進度實際繪製寬度、高度
float fRealWidth = Width - _DrawMargin * 2;
float fRealHeight = Height - _DrawMargin * 2;
float fSlider = Convert.ToSingle(fRealWidth) / 5;
if (_ProgressType != ProgressType.Bar)
{
//360/5
fSlider = 72;
}
float fRange = 0;
if (L_MarqueeStyle == MarqueeStyle.Swing) fRange = fRealWidth - fSlider;
else if (L_MarqueeStyle == MarqueeStyle.Cross) fRange = fRealWidth + fSlider;
else fRange = fRealWidth;
double dStep = Convert.ToDouble(L_MarqueeTime) / 10;
double dMarqueePer = 180.0 / dStep;
if (L_MarqueeType == MarqueeType.Even)
{
if (_ProgressType == ProgressType.Bar)
{
dMarqueePer = fRange / dStep;
}
else
{
dMarqueePer = 360.0 / dStep;
}
}
double dPeriod = 180;
if (L_MarqueeStyle == MarqueeStyle.Swing || L_MarqueeStyle == MarqueeStyle.Reciprocation_Blocks || L_MarqueeStyle == MarqueeStyle.Reciprocation_Continuous) dPeriod = 360;
if (_ProgressType == ProgressType.Bar)
{
if (_ProgressStyle == ProgressStyle.Marquee)
{
if (L_MarqueeType == MarqueeType.SlowInSlowOut)
{
if (dMarqueeValue > dPeriod)
{
bAcrossed = !bAcrossed;
dMarqueeValue = 0;
}
dMarqueeValue += dMarqueePer;
Invalidate();
}
else
{
if (L_MarqueeStyle == MarqueeStyle.Cross)
{
bToRight = true;
if (dMarqueeValue > fRange) dMarqueeValue = -fSlider;
}
else if (L_MarqueeStyle == MarqueeStyle.Across_Blocks || L_MarqueeStyle == MarqueeStyle.Across_Continuous)
{
bToRight = true;
if (dMarqueeValue > fRange)
{
bAcrossed = !bAcrossed;
dMarqueeValue = 0;
}
}
else
{
if (dMarqueeValue > fRange) bToRight = false;
if (dMarqueeValue < 0) bToRight = true;
}
dMarqueeValue = bToRight ? dMarqueeValue + dMarqueePer : dMarqueeValue - dMarqueePer;
Invalidate();
}
}
else
{
if (dMarqueeValue > 0) dMarqueeValue = 0;
dMarqueeValue -= 1;
if (dMarqueeValue <-_BlockSize) dMarqueeValue = 0;
Invalidate();
}
}
else if (_ProgressType == ProgressType.Arc || _ProgressType == ProgressType.Pie)
{
//為了更符合直觀認識，即：轉到頂部時速度最變到最慢，到最底部時速度加到最快，所以需要從270度開始。
if (L_MarqueeType == MarqueeType.SlowInSlowOut)
{
if (dMarqueeValue > dPeriod)
{
bAcrossed = !bAcrossed;
dMarqueeValue = 0;
}
dMarqueeValue += dMarqueePer;
Invalidate();
}
else
{
if (L_MarqueeStyle == MarqueeStyle.Cross)
{
bToRight = true;
if (dMarqueeValue > 360) dMarqueeValue = 0;
}
else if (L_MarqueeStyle == MarqueeStyle.Across_Blocks || L_MarqueeStyle == MarqueeStyle.Across_Continuous)
{
bToRight = true;
if (dMarqueeValue > 360)
{
bAcrossed = !bAcrossed;
dMarqueeValue = 0;
}
}
else if (L_MarqueeStyle == MarqueeStyle.Reciprocation_Blocks || L_MarqueeStyle == MarqueeStyle.Reciprocation_Continuous)
{
if (dMarqueeValue > 360) bToRight = false;
if (dMarqueeValue < 0) bToRight = true;
}
else
{
if (dMarqueeValue > 270 - fSlider / 2) bToRight = false;
if (dMarqueeValue < -90 - fSlider / 2) bToRight = true;
}
dMarqueeValue = bToRight ? dMarqueeValue + dMarqueePer : dMarqueeValue - dMarqueePer;
Invalidate();
}
}
}
畫進度條，其實就是將進度條的三個組成部分——背景、邊框、進度——分別繪製出來。
1，背景
（1）橫條（Bar）
填充一個矩形，這裡的矩形範圍是控制元件範圍減去“背景收縮寬度”後的範圍。
（2）圓餅（Pie）和圓弧（Arc）
填充一個圓形，同樣範圍是控制元件範圍減去“背景收縮寬度”後的範圍。
2，邊框
（1）橫條（Bar）
繪製一個矩形框，畫筆寬度就是邊框寬度，注意繪製的範圍，包含起點和寬高，寬高是要分別減去一半的邊框寬度的，因為繪製畫筆時，是從畫筆寬度中間作畫。
（2）圓餅（Pie）和圓弧（Arc）
繪製一個圓，畫筆寬度就是邊框寬度。同樣需要注意繪製的範圍，具體同上。
3，進度
這是實現時最複雜的地方，難度並不大，主要是要繪製的效果太多了。
在畫進度時要分兩種情況，一種是進度明確的，一種是進度不明確的（Marquee樣式）。
在每種情況中，進度都有多種樣式，比如連續、分段塊等等。
（1），進度明確
1.1，連續
（1）橫條（Bar）
填充一個矩形，注意繪製的起點為屬性“進度繪製範邊緣”的值。而矩形寬度為當前進度值除以100再乘以可繪製範圍。
簡而言之就是按百分比繪製矩形。
（2）圓餅（Pie）
填充一個扇形，除了繪製範圍起點外，需要注意的是起始角度。對於方法 FillPie 而言，以水平向右方向為0度。而我們實現的起始角度是在垂直向上方向，所以啟始角度要為270。
同上，繪製的解僱就是按百分比計算：當前值/100*360。
（3）圓弧（Arc）
畫一段弧線，同上需要注意啟始角度要為270。同時還要注意的還有“弧線厚度”這一屬性，所以計算繪製範圍時要減去相應的值。
同上，繪製的解僱就是按百分比計算：當前值/100*360。
1.2，分段塊
（1）橫條（Bar）
首先計算出當前可繪製的寬度範圍，然後除以“分段塊寬度”，計算出一共可畫多少個“塊”，這裡需要注意“分段塊寬度”是包含2/3的有顏色部分和1/3無顏色部分（充當間隔），在前一節中有詳細講解。
然後依次將這些“塊”繪製即可。
（2）圓餅（Pie）
同上，不過這裡的“分段塊寬度”指的是角度，同樣計算出需要多少個“小扇形”，然後依次繪製即可。
（3）圓弧（Arc）
同上，不過這裡的“分段塊寬度”指的是角度，同樣計算出需要多少個“小段弧線”，然後依次繪製即可。
1.3，兩段式
通過上圖我們可發現，兩段式就是將“連續”和“分段塊”結合起來，先繪製一遍“分段塊”再繪製一遍“連續”。
這裡需要注意的一點是每一遍都只佔50%，所以在計算相應的範圍時要乘以2。
因為“連續”和“分段塊”前面都以講過，此處便不再贅述。
1.4，螺旋
螺旋只有“橫條（Bar）”才支援，其本身是“分段塊”的變形，所以會使用“分段塊寬度”這一屬性。
在前節進行過詳細講解，所以此處不再贅述。
2，進度不明確（Marquee樣式）
雖然有多種Marquee樣式，但歸到最後無非三大類：位置變化、範圍變化、螺旋。
其中，“螺旋”在前節中詳細講解過，所以此處不再贅述。
無論“位置變化”還是“範圍變化”，都是通過定時器去按間隔迴圈改變相應的值。而“勻速”效果和“緩動”效果則是在每個間隔變化的值是否相等而已。
關於勻速和緩動我前幾篇文章都有詳細講過，此處不再贅述。
（1）位置變化
通過上面這些圖，一目瞭然，位置變化，對於橫條（Bar）而言，就是改變起始位置；對於圓餅（Pie）和圓弧（Arc）而言，則是改變起始角度。
（2）範圍變化
通過上面這些圖，一目瞭然，範圍變化，對於橫條（Bar）而言，就是使繪製範圍發生變化，準確的說是寬度的變化；對於圓餅（Pie）和圓弧（Arc）而言，則是繪製角度的大小變化。
（3）位置和範圍都發生變化
通過上面這些圖，一目瞭然，屬於前兩者的結合體。
（四）其它說明
在實現時，我並沒有去限制圓餅（Pie）和圓弧（Arc）一定得是正圓，也就是令其寬度和高度必須相等。
因為這樣可以實現一些比較好玩的效果，如下：
五、效果演示
為了更好的展示出進度條的特點，所以我們按下圖這樣構造一個演示程式。
本文中大部分圖片和動圖都是使用本演示程序錄制的。
具體演示程式及原始碼工程在文末有下載，請下載後自動體驗。
六、結束語
我們會發現Marquee樣式的動畫和我們常見的載入（Loading）動畫有些類似，實際上，載入動畫的實現方式正是本文中實現Marquee樣式時所使用的方式，所以後面我們會去實現“載入（Loading）控制元件”。
本文只是起一個拋磚引玉的作用，讀者不要被我的思路所限制，你可以盡情的去實現你想要的效果。
技術並沒有先進和落後，只有合適與不合適。
所以，對自己掌握的知識多抱有一些信心，盡情釋放自己的想像力，並在實踐中提升自己。
七、原始碼及工程下載
https://files.cnblogs.com/files/lesliexin/04,LProgressBar.7z
版权声明
本文为[itread01]所创，转载请带上原文链接，感谢
https://www.itread01.com/content/1604563625.html
边栏推荐
猜你喜欢
随机推荐
2个月再招10000人，字节跳动冲刺10万员工“小目标”
非常规聚合问题举例
读取、创建和运行多个文件的3个Python技巧
Outlier detection based on RNN self encoder
Electron应用使用electron-builder配合electron-updater实现自动更新
7.3.2 File Download & big file download
Skywalking系列博客1-安装单机版 Skywalking
不能再被问住了！ReentrantLock 源码、画图一起看一看！
面经手册 · 第16篇《码农会锁，ReentrantLock之公平锁讲解和实现》
DeepWalk模型的简介与优缺点
深入了解JS数组的常用方法
OPTIMIZER_TRACE详解
H5打造属于自己的视频播放器（JS篇2）
架构文章搜集
【C/C++ 2】Clion配置与运行C语言
为什么民营企业要做党建？——极客邦控股党支部专题学习
GBDT与xgb区别，以及梯度下降法和牛顿法的数学推导
计算机TCP/IP面试10连问，你能顶住几道?
keras model.compile损失函数与优化器
【Flutter 實戰】pubspec.yaml 配置檔案詳解