Google Chrome 圆形进度条

Posted 2020-10-24 conmajia

Conmajia ? 2012
Updated on Feb. 21, 2018

Google Chrome 的圆形进度条。

Demo

功能

显示百分比（0-100）。如果进度值达到 100%，则将闪烁指定次数。

属性

BlinkCount，结束后闪烁几次。0 为不闪烁，默认 2.

BlinkSpeed，闪烁速度，0-255，默认 10.

Image，中央图标

SpokeColor，辐条颜色

SpokeCount，辐条数量

Value，进度百分比

事件

没有加入进度变化或完成事件。

原理和结构

原理参考图 1：

绘制步骤如下：

• 用 Parent.BackColor 填充背景

• DrawPie() 绘制进度

• DrawSpokes() 绘制辐条

• DrawIcon() 绘制图标，居中

动画

利用 System.Windows.Forms.Timer 完成。在 Timer 事件中修改淡出进度，之后 Refresh()。

在 Paint 事件中改变填充色的 Alpha 分量，重绘一个圆。

如此反复数次，即呈现出闪烁效果。

1 if (!timer.Enabled || blink == BlinkCount)
2     drawProgress(canvasGraphic, value);
3 else
4 {
5     ((SolidBrush)pieBrush).Color = Color.FromArgb(count, ForeColor.R, ForeColor.G, ForeColor.B);
6     canvasGraphic.FillEllipse(pieBrush, rect);
7     ((SolidBrush)pieBrush).Color = ForeColor;
8 }

参阅：源代码

The End. \\(\\Box\\)