一个VC写的模拟时钟

最近似乎十分流行手机盖透明的手机，许多客户出于点缀手机盖的需要，都想加一个模块时钟。研究了一下MTK自己的模拟时钟。写了一些显示风格不同的时钟。出于学习和备忘目的，打算把模拟时钟的核心算法记下来，以供以后查阅。

出于某些方面的顾虑，不打算把所有的MTK代码贴出来。贴一个和MTK基本一样的VC DEMO。下面的时钟全部使用VC基本绘图函数实现，这些函数基本都能在MTK的GUI函数中找到替代。显示效果如下图：

其实画模拟时钟最重要的大约就是三角函数了。手机和电脑的默认坐标系都是原点在左上角。这样，我们确定了圆心位置后，就确定了表的位置，表针，表盘的位置坐标都在以圆心为中心的圆环上。其坐标可以通过三解函数推导出来。设圆心为（X，Y），半径为R，表上其他点的坐标为（X1，Y1），该点与圆心X轴夹角为A，大致可以推出该点坐标公式：

位于圆心右上角点的公式为：

X1 = X + RcosA;

Y1 = Y- RsinA;

位于圆心左上角点的公式为：

X1 = X - RcosA;

Y1 = Y- RsinA;

位于圆心左下角的公式为：

X1 = X- RcosA;

Y1 = Y + RsinA;

位于圆心右下角的公式为：

X1 = X + RcosA;

Y1 = Y + RsinA;

如果+ -使用角度来校正，公式就可以统一为

X1 = X + RcosA;

Y1 = Y + RsinA;

由于表是顺时针转动，我们的角度习惯上使用逆时针，所以我们使用自己校正后的角度值，从12点开始，按顺时针重新排列三角函数值，加入对角度正负的校正后，得如下正余弦数组：

static const float g_qj_gui_clock_acm_sine_table[] =
{
(float) - 0.99999820, (float) - 0.99431727, (float) - 0.97773360, (float) - 0.95042917,(float) - 0.91270313,
(float)-0.86496924, (float)-0.80775119, (float)-0.74167587,(float) - 0.66746803, (float) - 0.58594175,
(float) - 0.49799022, (float) - 0.40457821,(float) - 0.30673042,(float)-0.20551889, (float)-0.10205382,
(float)0.00000000,(float) 0.10457040, (float) 0.20799418, (float) 0.30913729, (float) 0.40689072,
(float) 0.50018258,(float) 0.58798990,(float)0.66934994, (float)0.74337050,(float) 0.80923998,
(float) 0.86623616, (float) 0.91373403, (float) 0.95121274, (float) 0.97826142,(float) 0.99458343,
(float)0.99999980, (float)0.99445115,(float) 0.97799831, (float) 0.95082172, (float) 0.91321931,
(float) 0.86560342, (float) 0.80849624,(float) 0.74252372,(float)0.66840956, (float)0.58696629,
(float) 0.49908672, (float) 0.40573486, (float) 0.30793410, (float) 0.20675662, (float) 0.10331227,
(float) - 0.00126490,(float)-0.10582843, (float)-0.20923132,(float) - 0.31033998, (float) - 0.40804598,
(float) - 0.50127753, (float) - 0.58901256,(float) - 0.67028925,(float)-0.74421601, (float)-0.80998244,
(float)-0.86686752,(float)-0.91424734, (float)-0.95160225, (float)-0.97852297, (float)-0.99471414,
};

static const float g_qj_gui_clock_acm_cosine_table[] =
{
(float) 0.00189735, (float) 0.10645731, (float) 0.20984996, (float) 0.31094114, (float) 0.40862330,(float) 0.50182489,
(float)0.58952354, (float)0.67075845,(float) 0.74463846, (float) 0.81035318, (float) 0.86718264, (float) 0.91450340,
(float) 0.95179643,(float) 0.97865315,(float)0.99477888, (float)1.00000000,(float) 0.99451749, (float) 0.97813006,
(float) 0.95101742, (float) 0.91347684, (float) 0.86591997,(float) 0.80886827,(float)0.74294728, (float)0.66887989,
(float) 0.58747821, (float) 0.49963478, (float) 0.40631283, (float) 0.30853576, (float) 0.20737548,(float) 0.10394131,
(float)-0.00063245, (float)-0.10519940,(float) - 0.20861283, (float) - 0.30973870, (float) - 0.40746839, (float) - 0.50073018,
(float) - 0.58850135,(float)-0.66981977, (float)-0.74379342, (float)-0.80961137,(float) - 0.86655204, (float) - 0.91399082,
(float) - 0.95140769, (float) - 0.97839241,(float) - 0.99464897,(float)-0.99999920, (float)-0.99438440, (float)-0.97786617,
(float) - 0.95062563, (float) - 0.91296138, (float) - 0.86528656, (float) - 0.80812388,(float) - 0.74209994,(float)-0.66793902,
(float)-0.58645414, (float)-0.49853857,(float)-0.40515651, (float)-0.30733233, (float)-0.20613779, (float)-0.10268295,
};

很轻松的通过向导创建一个VC对话框。

首先定义一些时钟常用的宏：

#define ANALOG_CENTER_X (227)
#define ANALOG_CENTER_Y (178)
#define ANALOG_R (150)
#define ANALOG_CENTER_R (10)
#define ANALOG_HOUR_LEN (ANALOG_R-80)
#define ANALOG_MINUTE_LEN (ANALOG_R-50)
#define ANALOG_SECOND_LEN (ANALOG_R-30)

添加一个刻画表盘的函数：

void CAnalogDlg::MyDrawScale()
{
int x1, y1, x2,y2;
int i;
int in_r = ANALOG_R - 20;
int out_r = ANALOG_R - 10;
CDC *pDC= GetDC();

CPen newPen, *oldPen, newPen1;
newPen.CreatePen(PS_SOLID,1,RGB(255,0,0));
newPen1.CreatePen(PS_SOLID,5,RGB(0,255,0));
oldPen = pDC->SelectObject(&newPen);


for (i = 0; i <60; i++)
{
x1 = ANALOG_CENTER_X + in_r*g_qj_gui_clock_acm_cosine_table[i];
y1 = ANALOG_CENTER_Y + in_r*g_qj_gui_clock_acm_sine_table[i];
x2 = ANALOG_CENTER_X + out_r*g_qj_gui_clock_acm_cosine_table[i];
y2 = ANALOG_CENTER_Y + out_r*g_qj_gui_clock_acm_sine_table[i];
if (( i% 5) == 0)
{
pDC->SelectObject(&newPen1);

pDC->MoveTo(x1, y1);
pDC->LineTo(x2, y2);
CRect cRect;
CString str;
str.Format("%d",(i<5)?12:(i/5));//数字的表示形式
pDC->SetTextColor(RGB(192,192,192));
cRect.SetRect(ANALOG_CENTER_X + 120*g_qj_gui_clock_acm_cosine_table[i]-10,ANALOG_CENTER_Y + 120*g_qj_gui_clock_acm_sine_table[i]-10,
ANALOG_CENTER_X + 120*g_qj_gui_clock_acm_cosine_table[i]+10,ANALOG_CENTER_Y + 120*g_qj_gui_clock_acm_sine_table[i]+10);
pDC->DrawText(str, &cRect, DT_CENTER);
}
else
{
pDC->SelectObject(&newPen);

pDC->MoveTo(x1, y1);
pDC->LineTo(x2, y2);
}
}
pDC->SelectObject(oldPen);
ReleaseDC(pDC);
}
画时钟的指针

void CAnalogDlg::DrawAnalogClockHand()
{
CDC *pDC = GetDC();
int x = ANALOG_CENTER_X, y = ANALOG_CENTER_Y;

int x1, y1, x2,y2;
CPen *oldPen, newPen1,newPen2, newPen3;
newPen1.CreatePen(PS_SOLID,1,RGB(255,0,0));
newPen2.CreatePen(PS_SOLID,3,RGB(0,255,0));
newPen3.CreatePen(PS_SOLID,5,RGB(0,0,255));
oldPen = pDC->SelectObject(&newPen3);

SYSTEMTIME st;
GetLocalTime(&st);

int h = st.wHour;
h++;
if (h > 12)
{
h -= 12;
}
h = (h - 1) * 5;
h += st.wMinute / 12;
if (h >= 60)
{
h = 0;
}

x2 = x + (int) ((float32)ANALOG_HOUR_LEN * g_qj_gui_clock_acm_cosine_table[h]);
y2 = y + (int) ((float32)ANALOG_HOUR_LEN * g_qj_gui_clock_acm_sine_table[h]);
x1 = x + (int) ((float32)20 * g_qj_gui_clock_acm_cosine_table[(h + 30)%60]);
y1 = y + (int) ((float32)20 * g_qj_gui_clock_acm_sine_table[(h + 30)%60]);
pDC->MoveTo(x1, y1);
pDC->LineTo(x2, y2);

pDC->SelectObject(&newPen2);
x2 = x + (int) ((float32)ANALOG_MINUTE_LEN * g_qj_gui_clock_acm_cosine_table[st.wMinute]);
y2 = y + (int) ((float32)ANALOG_MINUTE_LEN * g_qj_gui_clock_acm_sine_table[st.wMinute]);
x1 = x + (int) ((float32)20 * g_qj_gui_clock_acm_cosine_table[(st.wMinute + 30)%60]);
y1 = y + (int) ((float32)20 * g_qj_gui_clock_acm_sine_table[(st.wMinute + 30)%60]);
pDC->MoveTo(x1, y1);
pDC->LineTo(x2, y2);

pDC->SelectObject(&newPen1);
x2 = x + (int) ((float32)ANALOG_SECOND_LEN * g_qj_gui_clock_acm_cosine_table[st.wSecond]);
y2 = y + (int) ((float32)ANALOG_SECOND_LEN * g_qj_gui_clock_acm_sine_table[st.wSecond]);
x1 = x + (int) ((float32)20 * g_qj_gui_clock_acm_cosine_table[(st.wSecond + 30)%60]);
y1 = y + (int) ((float32)20 * g_qj_gui_clock_acm_sine_table[(st.wSecond + 30)%60]);
pDC->MoveTo(x1, y1);
pDC->LineTo(x2, y2);

pDC->SelectObject(oldPen);
ReleaseDC(pDC);
}

把函数添加到OnPaint函数，就得了一个简单的模拟时钟。需要美化时，再加上个圆做表心，然后是加个点做表轴。

如果需要动态的，为对话框添加个OnTimer事件，把OnPaint加进去就可以了。MTK对图形函数封装的很好，几乎不费什么力气就能把GUI函数替换进来。