需求

有智能手表的人都知道，前段时间的“太空人表盘”非常火热。被称为6块钱的快乐。但其实动手做这样一款太空人表盘并不难。我们也可以自己动手来制作一款太空人表盘。经过我的一番研究，总算制作成功了。今天就来分享给大家。

准备

  • Visual Studio 2019
  • EasyX Graphics Library ：Visual C++ 的免费绘图库
程序huawei.h
  1. #ifndef _HUAWEI_H_
  2. #define _HUAWEI_H_
  3. #include<graphics.h>
  4. void SetWindowNewStyle(int w, int h)
  5. {
  6.         // 去掉标题
  7.         SetWindowLong(GetHWnd(), GWL_STYLE, GetWindowLong(GetHWnd(), GWL_STYLE) & ~WS_CAPTION);
  8.         // 初始化界面为圆形
  9.         SetWindowRgn(GetHWnd(), CreateEllipticRgn(0, 0, w, h), true);
  10. }
  11. //png透明贴图
  12. void drawImg(IMAGE* pimg, int x, int y)
  13. {
  14.         // 变量初始化
  15.         DWORD* dst = GetImageBuffer();
  16.         DWORD* src = GetImageBuffer(pimg);
  17.         int dst_width = ::getwidth();                        //窗口宽高
  18.         int dst_height = ::getheight();
  19.         int _w = pimg->getwidth();
  20.         int _h = pimg->getheight();
  22.         // 计算贴图的实际长宽
  23.         int iwidth = (x + _w > dst_width) ? dst_width - x : _w;                // 处理超出右边界
  24.         int iheight = (y + _h > dst_height) ? dst_height - y : _h;        // 处理超出下边界
  25.         if (x < 0) { src += -x;                                iwidth -= -x;        x = 0; }                                // 处理超出左边界
  26.         if (y < 0) { src += (_w * -y);        iheight -= -y;        y = 0; }                                // 处理超出上边界
  27.                                                                                                                                                 // 修正贴图起始位置
  28.         dst += (dst_width * y + x);
  30.         // 实现透明贴图
  31.         for (int iy = 0; iy < iheight; iy++)
  32.         {
  33.                 for (int ix = 0; ix < iwidth; ix++)
  34.                 {
  35.                         byte a = (byte)(src[ix] >> 24);//计算透明通道的值[0,256) 0为完全透明 255为完全不透明
  36.                         if (a > 100)
  37.                         {
  38.                                 dst[ix] = src[ix];
  39.                         }
  40.                 }
  41.                 //换到下一行
  42.                 dst += dst_width;
  43.                 src += _w;
  44.         }
  45. }
  46. //去掉窗口标题以后，能够点击移动窗口
  47. void mouseEvent()
  48. {
  49.         //求鼠标相对于当前窗口左上角的坐标(即鼠标距离窗口左上的的宽度和高度)
  50.         static POINT WndPtSize;
  51.         static bool isMove = false;
  52.         if (MouseHit())
  53.         {
  54.                 MOUSEMSG msg = GetMouseMsg();
  55.                 if (msg.uMsg == WM_LBUTTONDOWN)        //左键按下
  56.                 {
  57.                         //获取窗口相对与屏幕左上角的 左上角坐标，和右下角坐标
  58.                         RECT wndRect;
  59.                         GetWindowRect(GetHWnd(), &wndRect);
  62.                         //获取鼠标光标相对于屏幕的坐标
  63.                         POINT curPos;
  64.                         GetCursorPos(&curPos);
  66.                         //求鼠标相对于当前窗口左上角的坐标
  67.                         WndPtSize.x = curPos.x - wndRect.left;
  68.                         WndPtSize.y = curPos.y - wndRect.top;
  70.                         isMove = true;
  71.                 }
  72.                 else if (msg.uMsg == WM_LBUTTONUP)//左键弹起
  73.                 {
  74.                         isMove = false;
  75.                 }
  76.                 else if (msg.uMsg == WM_MOUSEMOVE)//鼠标移动
  77.                 {
  78.                         if (isMove)
  79.                         {
  80.                                 POINT CursorPos;
  81.                                 GetCursorPos(&CursorPos);
  82.                                 /*把窗口移动到屏幕的x，y的位置
  83.                                 * @hwnd:窗口句柄
  84.                                 * @hwndInsertAfter:窗口的z顺序  HWND_TOPMOST {在前面, 位于任何顶部窗口的前面}
  85.                                 * @X，Y: 窗口左上角的新位置（相对于屏幕）
  86.                                 * @cx，xy: 窗口大小
  87.                                 * @uFlags:SWP_NOSIZE {忽略 cx、cy, 保持大小}
  88.                                 */
  89.                                 SetWindowPos(GetHWnd(), HWND_TOPMOST, CursorPos.x - WndPtSize.x, CursorPos.y - WndPtSize.y, 0, 0, SWP_NOSIZE);
  90.                                 //CursorPos.x - WndPtSize.x        //获取当前窗口左上角相对于屏幕的坐标
  91.                                 //CursorPos.y - WndPtSize.y
  93.                                 //printf("%d %d\n", CursorPos.x - WndPtSize.x, CursorPos.y - WndPtSize.y);
  94.                         }
  95.                 }
  96.                 else if (msg.uMsg == WM_RBUTTONDOWN)//右键按下
  97.                 {
  98.                         exit(0);
  99.                 }
  100.         }
  101. }
  102. #endif // !_TOOLS_H_
huawei.c
  1. #include <stdio.h>
  2. #include <time.h>
  3. #include "huawei.h"
  4. #include <mmsystem.h>
  5. #pragma comment(lib,"winmm.lib")
  6. #pragma warning(disable:4996)
  7. /*
  8. 1,文本字体设置
  9. 2,图片动画效果
  10. 3,绘制表盘
  11. */
  12. #define WIN_SIZE 500
  13. #define WIN_HALF (WIN_SIZE/2)        //窗口的一半
  14. IMAGE spaceMan[59];
  15. IMAGE other[6];
  16. const char *week[7] = { "日","一","二","三","四","五","六" };
  17. void setTextStyle(int height, int width, const char *faceName)
  18. {
  19.         LOGFONT f = { 0 };
  20.         f.lfHeight = height;
  21.         f.lfWidth = width;
  22.         f.lfQuality = ANTIALIASED_QUALITY;
  23.         strcpy(f.lfFaceName, faceName);
  24.         settextstyle(&f);
  25. }
  26. void loadImg()
  27. {
  28.         mciSendString("D:\\VS\\作品\\智能表盘\\images/风儿吹.mp3", NULL, 0, NULL);
  29.         mciSendString("D:\\VS\\作品\\智能表盘\\images/风儿吹.mp3 repeat", NULL, 0, NULL);
  31.         char fileName[50] = { 0 };
  32.         for (int i = 0; i < 30; i++)
  33.         {
  34.                 sprintf_s(fileName, "./images/guoguoxiaoshidi (%d).jpeg", i + 1);
  35.                 loadimage(spaceMan + i, fileName, 140, 130);
  36.         }
  38.         loadimage(&other[0], "./images/xinlv.jpg", 60, 60);//心率
  39.         loadimage(&other[1], "./images/sun.jpg", 40, 40);//太阳
  40.         loadimage(&other[2], "./images/shoes.jpg", 40, 40);//鞋子
  41.         loadimage(&other[3], "./images/shang.jpg", 30, 30);//上箭头
  42.         loadimage(&other[4], "./images/xia.jpg", 30, 30);//下箭头
  43.         loadimage(&other[5], "./images/rocket.jpg", 40, 40);//火箭
  44. }
  46. //太空人旋转动画
  47. void animation()
  48. {
  49.         static int index = 0;        //[0~59)
  50.         putimage(175, 210, spaceMan + index);
  51.         static DWORD t1;
  52.         DWORD t2 = clock();//获取程序运行到调用该函数经过的毫秒
  53.         if (t2 - t1 > 20)
  54.         {
  55.                 index = (index + 1) % 30;
  56.                 t1 = t2;
  57.         }
  58. }
  59. void gameDraw()
  60. {
  61.         setbkcolor(RGB(255, 0, 0));
  62.         cleardevice();
  63.         //绘制表盘
  64.         setlinecolor(RGB(0, 0, 0));//设置边框颜色
  65.         setlinestyle(PS_SOLID, 30);
  66.         setfillcolor(RGB(255, 255, 255));//设置圆的填充白色
  67.         fillellipse(0, 0, WIN_SIZE, WIN_SIZE);//绘制一个圆
  69.         //绘制线条
  70.         setlinestyle(PS_SOLID, 4);
  71.         setlinecolor(BLACK);
  72.         //最上面竖线
  73.         line(WIN_HALF - 30, 20, WIN_HALF - 30, 130);
  74.         //横线x2
  75.         line(WIN_HALF - 195, WIN_HALF - 120, WIN_HALF + 195, WIN_HALF - 120);
  76.         line(WIN_HALF - 195, WIN_HALF + 120, WIN_HALF + 195, WIN_HALF + 120);
  77.         //下面线条x3
  78.         line(WIN_HALF + 80, WIN_HALF + 120, WIN_HALF + 80, WIN_HALF + 175);
  79.         line(WIN_HALF + 80, WIN_HALF + 175, WIN_HALF - 60, WIN_HALF + 175);
  80.         line(WIN_HALF - 60, WIN_HALF + 175, WIN_HALF - 60, WIN_HALF + 175 + 48);
  81.         setbkmode(TRANSPARENT);
  82.         //左上空气湿度90%
  83.         setTextStyle(55, 23, "Arial");
  84.         settextcolor(BLACK);
  85.         outtextxy(WIN_HALF - 155, 75, "90%");
  86.         drawImg(other + 5, WIN_HALF - 90, 35);        //火箭                                                                                        //右上
  87.         putimage(WIN_HALF - 90, 35, other + 5);
  88.         setTextStyle(25, 15, "黑体");
  89.         outtextxy(WIN_HALF - 25, 35, "空气良好");
  90.         setTextStyle(25, 13, "宋体");
  91.         outtextxy(WIN_HALF - 25, 65, "晴天");
  92.         outtextxy(WIN_HALF - 25, 95, "25℃");
  93.         outtextxy(WIN_HALF + 38, 65, "26°");
  94.         outtextxy(WIN_HALF + 38, 95, "17°");
  95.         drawImg(other + 4, WIN_HALF + 73, 60);        //上面的箭头
  96.         drawImg(other + 3, WIN_HALF + 73, 90);        //下面的箭头
  97.         drawImg(other + 1, WIN_HALF + 105, 70);        //太阳
  98.         putimage(WIN_HALF + 73, 60, other + 4);
  99.         putimage(WIN_HALF + 73, 90, other + 3);
  100.         putimage(WIN_HALF + 105, 70, other + 1);
  101.         // 下部分
  102.         setTextStyle(37, 17, "宋体");
  103.         outtextxy(100, WIN_HALF + 130, "睡眠");
  104.         outtextxy(WIN_HALF + 90, WIN_HALF + 130, "距离");
  105.         outtextxy(50, WIN_HALF-40, "平顶山");
  107.         setTextStyle(40, 15, "Arial");
  108.         outtextxy(185, WIN_HALF + 125, "7h30m");
  109.         outtextxy(215, WIN_HALF + 180, "9.88km");
  110.         //中间
  111.         //心率
  112.         setTextStyle(25, 13, "宋体");
  113.         outtextxy(60, WIN_HALF + 30, "80~128");
  114.         drawImg(&other[0], 65, WIN_HALF + 50);        //心率图
  115.         putimage(65, WIN_HALF + 50, other + 0);
  116.         setTextStyle(40, 15, "Arial");
  117.         outtextxy(135, WIN_HALF + 60, "92");
  118.         // 步数
  119.         drawImg(&other[2], WIN_HALF + 65, WIN_HALF + 65);
  120.         putimage(WIN_HALF + 65, WIN_HALF + 65, &other[2]);
  121.         outtextxy(WIN_HALF + 125, WIN_HALF + 75, "9527");
  122.         //时间、日期相关
  123.         time_t timep = time(NULL);                        //获取当前时间
  124.         struct tm* p = localtime(&timep);        //把时间转成格式化时间
  125.         setTextStyle(25, 12, "宋体");
  126.         outtextxy(WIN_HALF + 110, WIN_HALF - 20, "四月六号");
  127.         char fileName[40] = { 0 };
  128.         sprintf_s(fileName, "周%s %d-%d", week[p->tm_wday], p->tm_mon + 1, p->tm_mday);
  129.         outtextxy(WIN_HALF + 110, WIN_HALF + 10, fileName);
  130.         // 获取字体
  131.         setTextStyle(100, 40, "Arial");
  132.         char szBuf[40] = { 0 };
  133.         sprintf_s(szBuf, "%d:%02d", p->tm_hour, p->tm_min);
  134.         outtextxy(105, 120, szBuf);
  135.         // 秒
  136.         setTextStyle(55, 23, "Arial");
  137.         sprintf(szBuf, "%02d", p->tm_sec);
  138.         outtextxy(335, 160, szBuf);
  139. }
  140. int main()
  141. {
  142.         initgraph(WIN_SIZE, WIN_SIZE/*,EW_SHOWCONSOLE*/);
  143.         SetWindowNewStyle(WIN_SIZE, WIN_SIZE);
  144.         loadImg();
  145.         BeginBatchDraw();//双缓冲 防止闪屏
  146.         while (true)
  147.         {
  148.                 gameDraw();
  149.                 animation();
  150.                 mouseEvent();
  151.                 FlushBatchDraw();
  152.         }
  153.         EndBatchDraw();
  154.         return 0;
  155. }
运行图
watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjI5MTA5,size_16,color_FFFFFF,t_70#pic_center.jpg