GDI绘制时钟效果，与系统时间保持同步，基于Winform
2018年工作之余，想起来捡起GDI方面的技术，特意在RichCodeBox项目中做了两个示例程序，其中一个就是时钟效果，纯C#开发。这个CSharpQuartz是今天上午抽出一些时间，编写的，算是偷得浮生半日休闲吧。先来看看效果图吧：
这是直接在Winform的基础上进行绘制的。接下来，我对时钟进行了封装，封装成一个名为CSharpQuartz的类，效果如下：
这是把时钟封装后，实现的一种效果，CSharpQuartz内部开辟了一个线程，与系统时间，保持同步，每秒刷新一次。所采用的技术也就是GDI和多线程及事件委托。把时钟封装成对象后，还为其添加了OnChanged事件，用于对象提供外部
处理之用。接下来就简单的说下，做次小程序的一些准备工作吧。
这也是最近偶尔听到有朋友问怎样做时钟的事，想来，其实也简单的，只是需要一些耐心和细心，这里主要还利用一些三角函数进行计算。上图看似很简单，其实也有很多小细节需要注意。我就把大致绘制的过程简单说下：
首先，我们需要定义一个圆，来作为时钟的轮廓，这里是通过设置时钟的直径及winform的宽高，来计算出时钟在窗体居中的位置。绘制圆的代码就更简单了
float w = 300f, h = 300f;
float x = (this.Width - w) / 2;
float y = (this.Height - h) / 2;
float d = w;//直径
float r = d / 2;//半径
graphics.DrawEllipse(pen, new RectangleF(x, y, w, h));//绘制圆
接下来，我们需要计算圆的一周遍布的12个时间点。然后把这些时间点和圆心连在一起，就形成了上图我们看到的不同时间点的线段。圆心的查找非常简单，圆心的坐标点，其实就是x轴+半径r,y轴+半径r：
PointF pointEclipse = new PointF(x + r, y + r);
开始分表绘制12个点与圆心的连线，我这里是以9点为起点，此时，脑海中呈现这样的画面
时针一圈12格，每格也就是 Math.PI/6
比如我们计算10点在圆上的坐标P10.
10点所在的点，与x轴的夹角呈30度。那么10点在x上的坐标应该是，x1=x+r-r*Cos(30),以此类推，不难求出12个点的位置，具体代码如下：
/// <summary>
/// <![CDATA[画时刻线 这里是以9点这个时间坐标为起点 进行360度]]>
/// </summary>
/// <param name="graphics"><![CDATA[画布]]></param>
/// <param name="x"><![CDATA[圆x坐标]]></param>
/// <param name="y"><![CDATA[圆y坐标]]></param>
/// <param name="r"><![CDATA[圆x坐标]]></param>
private void DrawQuartzLine(Graphics graphics, float x, float y, float r)
{
//圆心
PointF pointEclipse = new PointF(x + r, y + r);
float labelX, labelY;//文本坐标
float angle = Convert.ToSingle(Math.PI / 6);//角度 30度
Font font = new Font(FontFamily.GenericSerif, 12);
float _x, _y;//圆上的坐标点
using (Brush brush = new System.Drawing.SolidBrush(Color.Red))
{
using (Pen pen = new Pen(Color.Black, 0.6f))
{
//一天12H，将圆分为12份
for (int i = 0; i <= 11; i++)
{
PointF p10;//圆周上的点
float pAngle = angle * i;
float x1, y1;
//三、四象限
if (pAngle > Math.PI)
{
if ((pAngle - Math.PI) > Math.PI / 2)//钝角大于90度
{
//第三象限
x1 = Convert.ToSingle(r * Math.Cos(Math.PI * 2 - pAngle));
y1 = Convert.ToSingle(r * Math.Sin(Math.PI * 2 - pAngle));
_x = x + r - x1;
_y = y + r + y1;
labelX = _x - 8;
labelY = _y;
}
else
{
//第四象限
x1 = Convert.ToSingle(r * Math.Cos(pAngle - Math.PI));
y1 = Convert.ToSingle(r * Math.Sin(pAngle - Math.PI));
_x = x + r + x1;
_y = y + r + y1;
labelX = _x;
labelY = _y;
}
}
//一、二象限
else if (pAngle > Math.PI / 2)//钝角大于90度
{
//第一象限
x1 = Convert.ToSingle(r * Math.Cos(Math.PI - pAngle));
y1 = Convert.ToSingle(r * Math.Sin(Math.PI - pAngle));
_x = x + r + x1;
_y = y + r - y1;
labelX = _x;
labelY = _y - 20;
}
else
{
//第二象限
x1 = Convert.ToSingle(r * Math.Cos(pAngle));
y1 = Convert.ToSingle(r * Math.Sin(pAngle));
_x = x + r - x1;
_y = y + r - y1;
labelX = _x - 15;
labelY = _y - 20;
}
//上半圆 分成12份，每份 30度
if (i + 9 > 12)
{
graphics.DrawString((i + 9 - 12).ToString(), font, brush, labelX, labelY);
}
else
{
if (i + 9 == 9)
{
labelX = x - 13;
labelY = y + r - 6;
}
graphics.DrawString((i + 9).ToString(), font, brush, labelX, labelY);
}
p10 = new PointF(_x, _y);
graphics.DrawLine(pen, pointEclipse, p10);
}
}
}
}
为了辅助计算，我又添加了x轴与y轴的线，就是我们在效果图中看到的垂直于水平两条线段。
/// <summary>
/// <![CDATA[绘制象限]]>
/// </summary>
/// <param name="graphics"><![CDATA[画布]]></param>
/// <param name="x"><![CDATA[圆x坐标]]></param>
/// <param name="y"><![CDATA[圆y坐标]]></param>
/// <param name="r"><![CDATA[圆半径]]></param>
private void DrawQuadrant(Graphics graphics, float x, float y, float r)
{
float w = r * 2;
float extend = 100f;
using (Pen pen = new Pen(Color.Black, 1))
{
#region 绘制象限
PointF point1 = new PointF(x - extend, y + r);//
PointF point2 = new PointF(x + w + extend, y + r);
PointF point3 = new PointF(x + r, y - extend);//
PointF point4 = new PointF(x + r, y + w + extend);
graphics.DrawLine(pen, point1, point2);
graphics.DrawLine(pen, point3, point4);
#endregion 绘制象限
}
}
接下来，该绘制指针（时、分、秒），就是我们效果图中看到的，红绿蓝，三条长短不一的线段，秒针最长，这是和本地系统时间同步，所以要根据当前时间，计算出指针所在的位置。
/// <summary>
/// <![CDATA[绘制时、分、秒针]]>
/// </summary>
/// <param name="graphics"><![CDATA[画布]]></param>
/// <param name="x"><![CDATA[圆x坐标]]></param>
/// <param name="y"><![CDATA[圆y坐标]]></param>
/// <param name="r"><![CDATA[圆半径]]></param>
private void DrawQuartzShot(Graphics graphics, float x, float y, float r)
{
if (this.IsHandleCreated)
{
this.Invoke(new Action(() =>
{
//当前时间
DateTime dtNow = DateTime.Now;
int h = dtNow.Hour;
int m = dtNow.Minute;
int s = dtNow.Second;
float ha = Convert.ToSingle(Math.PI * 2 / 12);//每小时所弧度 360/12格=30
float hm = Convert.ToSingle(Math.PI * 2 / 60);
float hs = Convert.ToSingle(Math.PI * 2 / 60);
float x1, y1, offset = 60f;
using (Pen pen = new Pen(Color.Green, 4))
{
//时针
h = h >= 12 ? h - 12 : h;
double angle = h * ha;//当前时针所占弧度
x1 = x + r + Convert.ToSingle(Math.Sin(angle) * (r - offset));//通过调整offset的大小，可以控制时针的长短
y1 = y + r - Convert.ToSingle(Math.Cos(angle) * (r - offset));
//圆心
PointF pointEclipse = new PointF(x + r, y + r);
PointF pointEnd = new PointF(x1, y1);
graphics.DrawLine(pen, pointEclipse, pointEnd);//画45度角
//分针
using (Pen penYellow = new Pen(Color.Red, 2))
{
offset = 30;
//分
double angelMinutes = hm * m;//每分钟弧度
x1 = x + r + Convert.ToSingle(Math.Sin(angelMinutes) * (r - offset));//通过调整offset的大小，可以控制时针的长短
y1 = y + r - Convert.ToSingle(Math.Cos(angelMinutes) * (r - offset));
graphics.DrawLine(penYellow, pointEclipse, new PointF(x1, y1));//画45度角
}
//秒针
using (Pen penYellow = new Pen(Color.Blue, 2))
{
offset = 20;
//分
double angelSeconds = hs * s;//每秒钟弧度
x1 = x + r + Convert.ToSingle(Math.Sin(angelSeconds) * (r - offset));//通过调整offset的大小，可以控制时针的长短
y1 = y + r - Convert.ToSingle(Math.Cos(angelSeconds) * (r - offset));
graphics.DrawLine(penYellow, pointEclipse, new PointF(x1, y1));//画45度角
}
}
this.lblTime.Text = string.Format("当前时间：{0}:{1}:{2}", h, m, s);
}));
}
}
最后，开辟一个线程，来同步更新时针的状态。
/// <summary>
///
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void Quartz_Load(object sender, EventArgs e)
{
timer = new Thread(() =>
{
if (_graphics == null)
{
_graphics = this.CreateGraphics();
_graphics.SmoothingMode = SmoothingMode.HighQuality; //高质量
_graphics.PixelOffsetMode = PixelOffsetMode.HighQuality; //高像素偏移质量
}
while (true)
{
_graphics.Clear(this.BackColor);
DrawCaller(_graphics);
System.Threading.Thread.Sleep(1000);
}
});
timer.IsBackground = true;
}
每秒钟，更新一次，其实就是重绘。
完成了以上几个步骤，我们就完成GDI绘制时钟的工作，后来，把它封装成一个名为CSharpQuartz的对象，具体代码如下：
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Linq;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Windows.Forms;
/*=================================================================================================
*
* Title:C#开发的简易时钟
* Author:李朝强
* Description:模块描述
* CreatedBy:lichaoqiang.com
* CreatedOn:
* ModifyBy:暂无...
* ModifyOn:
* Company:河南天一文化传播股份有限公司
* Blog:http://www.lichaoqiang.com
* Mark:
*
*** ================================================================================================*/
namespace WinformGDIEvent.Sample
{
/// <summary>
/// <![CDATA[CSharpQuarz GDI时钟]]>
/// </summary>
public class CSharpQuartz : IDisposable
{
/// <summary>
/// 定时器
/// </summary>
private Thread timer = null;
/// <summary>
/// X坐标
/// </summary>
public float X { get; private set; }
/// <summary>
/// Y坐标
/// </summary>
public float Y { get; private set; }
/// <summary>
/// 半径
/// </summary>
private float r;
/// <summary>
/// 画布
/// </summary>
private Graphics Graphics = null;
/// <summary>
/// 直径
/// </summary>
public float Diameter { get; private set; }
/// <summary>
///
/// </summary>
public Form CurrentWinform { get; private set; }
/// <summary>
///
/// </summary>
private EventHandler _OnChanged;
/// <summary>
/// 事件，时钟状态更新后，当前频次1秒钟
/// </summary>
public event EventHandler OnChanged
{
add
{
this._OnChanged += value;
}
remove
{
this._OnChanged -= value;
}
}
/// <summary>
/// 构造函数
/// </summary>
CSharpQuartz()
{
//
timer = new Thread((() =>
{
if (Graphics == null)
{
Graphics = CurrentWinform.CreateGraphics();//创建画布
Graphics.SmoothingMode = SmoothingMode.HighQuality; //高质量
Graphics.PixelOffsetMode = PixelOffsetMode.HighQuality; //高像素偏移质量
}
while (true)
{
//清除画布颜色，以窗体底色填充
Graphics.Clear(CurrentWinform.BackColor);
DrawCaller();//绘制时钟
//事件
if (_OnChanged != null) _OnChanged(this, null);
System.Threading.Thread.Sleep(1000);
}
}));
timer.IsBackground = true;
}
/// <summary>
/// <![CDATA[构造函数]]>
/// </summary>
/// <param name="x"><![CDATA[圆x坐标]]></param>
/// <param name="y"><![CDATA[圆y坐标]]></param>
/// <param name="d"><![CDATA[圆直径]]></param>
public CSharpQuartz(Form form, float x, float y, float d)
: this()
{
this.CurrentWinform = form;
this.X = x;
this.Y = y;
this.Diameter = d;
r = d / 2;
}
/// <summary>
///
/// </summary>
public void Start()
{
if (timer.IsAlive == false) timer.Start();//启动工作线程
}
/// <summary>
/// 终止
/// </summary>
public void Stop()
{
if (timer.IsAlive == true) timer.Abort();//终止工作线程
}
/// <summary>
/// <![CDATA[调用绘图]]>
/// </summary>
private void DrawCaller()
{
Graphics.SmoothingMode = SmoothingMode.HighQuality; //高质量
Graphics.PixelOffsetMode = PixelOffsetMode.HighQuality; //高像素偏移质量
using (Pen pen = new Pen(Color.Red, 2))
{
if (this.CurrentWinform.IsHandleCreated)
{
this.CurrentWinform.Invoke(new Action(() =>
{
//绘制圆
Graphics.DrawEllipse(pen, new RectangleF(X, Y, Diameter, Diameter));
//绘制象限
DrawQuadrant();
//绘制时、分、秒等针
DrawQuartzShot();
//绘制时刻线
DrawQuartzLine();
//写入版本信息
WriteVersion();
}));
}
}
}
/// <summary>
/// <![CDATA[绘制象限]]>
/// </summary>
private void DrawQuadrant()
{
#region 绘制象限
float w = Diameter;
float extend = 100f;
using (Pen pen = new Pen(Color.Black, 1))
{
PointF point1 = new PointF(X - extend, Y + r);//
PointF point2 = new PointF(X + w + extend, Y + r);
PointF point3 = new PointF(X + r, Y - extend);//
PointF point4 = new PointF(X + r, Y + w + extend);
Graphics.DrawLine(pen, point1, point2);
Graphics.DrawLine(pen, point3, point4);
}
#endregion 绘制象限
}
/// <summary>
/// <![CDATA[绘制时、分、秒针]]>
/// </summary>
private void DrawQuartzShot()
{
//当前时间
DateTime dtNow = DateTime.Now;
int h = dtNow.Hour;
int m = dtNow.Minute;
int s = dtNow.Second;
float ha = Convert.ToSingle(Math.PI * 2 / 12);//每小时所弧度 360/12格=30
float radian = Convert.ToSingle(Math.PI * 2 / 60);//分秒偏移弧度
float x1, y1, offset = 60f;
using (Pen pen = new Pen(Color.Green, 4))
{
//时针
h = h >= 12 ? h - 12 : h;
double angle = h * ha;//当前时针所占弧度
x1 = X + r + Convert.ToSingle(Math.Sin(angle) * (r - offset));//通过调整offset的大小，可以控制时针的长短
y1 = Y + r - Convert.ToSingle(Math.Cos(angle) * (r - offset));
//圆心
PointF pointEclipse = new PointF(X + r, Y + r);
PointF pointEnd = new PointF(x1, y1);
Graphics.DrawLine(pen, pointEclipse, pointEnd);//画45度角
//分针
using (Pen penYellow = new Pen(Color.Red, 2))
{
offset = 30;//与分针长度成反比
//分
double angelMinutes = radian * m;//每分钟弧度
x1 = X + r + Convert.ToSingle(Math.Sin(angelMinutes) * (r - offset));//通过调整offset的大小，可以控制时针的长短
y1 = Y + r - Convert.ToSingle(Math.Cos(angelMinutes) * (r - offset));
Graphics.DrawLine(penYellow, pointEclipse, new PointF(x1, y1));//画45度角
}
//秒针
using (Pen penYellow = new Pen(Color.Blue, 2))
{
offset = 20;
//分
double angelSeconds = radian * s;//每秒钟弧度
x1 = X + r + Convert.ToSingle(Math.Sin(angelSeconds) * (r - offset));//通过调整offset的大小，可以控制时针的长短
y1 = Y + r - Convert.ToSingle(Math.Cos(angelSeconds) * (r - offset));
Graphics.DrawLine(penYellow, pointEclipse, new PointF(x1, y1));//画45度角
}
}
}
/// <summary>
/// <![CDATA[绘制时刻线]]>
/// </summary>
private void DrawQuartzLine()
{
//圆心
PointF pointEclipse = new PointF(X + r, Y + r);
float labelX, labelY;//文本坐标
float angle = Convert.ToSingle(Math.PI / 6);//角度 30度
using (Font font = new Font(FontFamily.GenericSerif, 12))
{
float _x, _y;//圆上的坐标点
using (Brush brush = new System.Drawing.SolidBrush(Color.Red))
{
using (Pen pen = new Pen(Color.Black, 0.6f))
{
//一天12H，将圆分为12份
for (int i = 0; i <= 11; i++)
{
PointF p10;//圆周上的点
float pAngle = angle * i;
float x1, y1;
//三、四象限
if (pAngle > Math.PI)
{
if ((pAngle - Math.PI) > Math.PI / 2)//钝角大于90度
{
//第三象限
x1 = Convert.ToSingle(r * Math.Cos(Math.PI * 2 - pAngle));
y1 = Convert.ToSingle(r * Math.Sin(Math.PI * 2 - pAngle));
_x = X + r - x1;
_y = Y + r + y1;
labelX = _x - 8;
labelY = _y;
}
else
{
//第四象限
x1 = Convert.ToSingle(r * Math.Cos(pAngle - Math.PI));
y1 = Convert.ToSingle(r * Math.Sin(pAngle - Math.PI));
_x = X + r + x1;
_y = Y + r + y1;
labelX = _x;
labelY = _y;
}
}
//一、二象限
else if (pAngle > Math.PI / 2)//钝角大于90度
{
//第一象限
x1 = Convert.ToSingle(r * Math.Cos(Math.PI - pAngle));
y1 = Convert.ToSingle(r * Math.Sin(Math.PI - pAngle));
_x = X + r + x1;
_y = Y + r - y1;
labelX = _x;
labelY = _y - 20;
}
else
{
//第二象限
x1 = Convert.ToSingle(r * Math.Cos(pAngle));
y1 = Convert.ToSingle(r * Math.Sin(pAngle));
_x = X + r - x1;
_y = Y + r - y1;
labelX = _x - 15;
labelY = _y - 20;
}
//上半圆 分成12份，每份 30度
if (i + 9 > 12)
{
Graphics.DrawString((i + 9 - 12).ToString(), font, brush, labelX, labelY);
}
else
{
if (i + 9 == 9)
{
labelX = X - 13;
labelY = Y + r - 6;
}
Graphics.DrawString((i + 9).ToString(), font, brush, labelX, labelY);
}
p10 = new PointF(_x, _y);
Graphics.DrawLine(pen, pointEclipse, p10);
}
}
}
}
}
/// <summary>
/// <![CDATA[写入版本信息]]>
/// </summary>
private void WriteVersion()
{
PointF point = new PointF(X + r / 4, Y + r - 30);
using (Font font = new Font(FontFamily.GenericSansSerif, 18))
{
using (Brush brush = new SolidBrush(Color.Black))
{
this.Graphics.DrawString("Quartz", font, brush, point);
}
}
}
/// <summary>
/// <![CDATA[释放]]>
/// </summary>
/// <param name="isDispose"></param>
private void Dispose(bool isDispose)
{
if (isDispose)
{
timer.Abort();
this.Graphics.Dispose();
}
}
/// <summary>
///
/// </summary>
public void Dispose()
{
this.Dispose(true);
}
}
}
winfom调用示例
/// <summary>
///
/// </summary>
private CSharpQuartz sharpQuartz = null;
/// <summary>
///
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void CSharpQuartzSample_Load(object sender, EventArgs e)
{
float w = 300f, h = 300f;
float x = (this.Width - w) / 2;
float y = (this.Height - h) / 2;
sharpQuartz = new CSharpQuartz(this, x, y, w);
sharpQuartz.OnChanged += SharpQuartz_OnChanged;
sharpQuartz.Start();
}
/// <summary>
///
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void SharpQuartz_OnChanged(object sender, EventArgs e)
{
if (lblTime.IsHandleCreated)
{
lblTime.Invoke(new Action(() =>
{
lblTime.Text = DateTime.Now.ToString("当前时间：HH:mm:ss");
}));
}
}
这就是我们开篇第一张效果图，带有Quartz字样的，至此，关于GDI绘制时钟与系统时间同步的小程序就这样完成。时间仓促，某些计算方法买来得及仔细推敲，不足之处，大家多提意见。
版权声明：本文为ibeisha原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。