[C#] (原創)一步一步教你自定義控制元件——04,ProgressBar(進度條)
一、前言
技術沒有先進與落後,只有合適與不合適。
本篇的自定義控制元件是:進度條(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(); }OnPaint
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(); } } }Timer_Tick
畫進度條,其實就是將進度條的三個組成部分——背景、邊框、進度——分別繪製出來。
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