图形时钟 - Clock

项目简介

这是一个基于 EasyX 图形库开发的多功能时钟应用程序，不仅实现了基础的时钟显示功能，还融入了丰富的设计巧思和多个进阶功能模块。

---

进阶项实现说明

✅ 进阶项①：时钟设计融入自己的巧思

本项目在传统时钟的基础上，设计了一个多功能时钟应用，包含四个主要模块：

1. 世界时钟模块

• 支持添加多个城市的时钟
• 实时显示不同时区的当前时间
• 支持滚动浏览和删除城市
• 每个城市卡片显示当地时间和与本地的时差

2. 闹钟模块

• 支持添加、编辑、删除多个闹钟
• 可设置闹钟标签、重复日期（周一至周日）
• 支持贪睡功能（可自定义贪睡时长：5/10/15/20/30分钟）
• 闹钟触发时显示通知条并播放铃声
• 多种内置铃声可选

3. 秒表模块

• 精确到毫秒的计时显示
• 支持开始、暂停、继续、重置操作
• 支持记录多个计次（Lap）
• 计次列表显示单次用时和总用时
• 抗锯齿的圆形进度显示

4. 计时器模块

• 支持设置小时、分钟、秒的倒计时
• 可视化圆形进度条显示剩余时间
• 支持自定义标签和铃声
• 预置常用时长（1分钟、5分钟、10分钟等）
• 最近使用记录，方便快速启动
• 自定义计时器弹窗界面
• 倒计时结束通知和铃声提醒

5. 界面设计巧思

• 现代化深色主题：采用深灰色调配合橙色点缀，视觉舒适
• 统一的导航栏：四个模块通过顶部导航栏切换，交互直观
• 卡片式布局：各模块采用卡片式设计，层次分明
• 圆角矩形元素：按钮、输入框、卡片均采用圆角设计，现代感强
• 悬停反馈：按钮和交互元素有悬停效果，提升用户体验
• 滚动支持：内容超出时支持鼠标滚轮滚动

---

✅ 进阶项②：时钟能够实现抗锯齿算法

本项目实现了完整的基于 SDF（Signed Distance Field）的抗锯齿渲染系统：

SDF 抗锯齿原理

// 计算点到圆的有符号距离
float SDF::circle_sdf(float x, float y, float center_x, float center_y, float radius)
{
    float dx = x - center_x;
    float dy = y - center_y;
    float distance = sqrt(dx * dx + dy * dy);
    return distance - radius;  // 内负外正边界0
}

// 平滑过渡函数
float SDF::smoothstep(float edge0, float edge1, float x)
{
    float t = max(0.0f, min(1.0f, (x - edge0) / (edge1 - edge0)));
    return t * t * (3.0f - 2.0f * t);  // 三次平滑曲线
}

实现的抗锯齿图元

1. 抗锯齿实心圆 (draw_aa_circle)

   • 用于按钮、图标等圆形元素

2. 抗锯齿空心圆环 (draw_aa_ring)

   • 用于计时器进度圆、秒表进度圆、最近使用卡片圆环

3. 抗锯齿圆弧 (draw_aa_arc)

   • 用于计时器倒计时进度条
   • 支持指定起始角度和扫描角度

4. 抗锯齿线段 (draw_aa_line)

   • 用于删除按钮的叉叉等细节

抗锯齿效果对比

• 使用 SDF + smoothstep 实现边缘像素的透明度渐变
• 通过颜色混合使边缘过渡自然
• 消除了传统 Bresenham 算法产生的锯齿

---

✅ 进阶项③：使用了其他图像处理算法

1. 颜色混合算法

COLORREF SDF::blend_color(COLORREF bg, COLORREF fg, float alpha)
{
    int r = (int)(GetRValue(bg) * (1.0f - alpha) + GetRValue(fg) * alpha);
    int g = (int)(GetGValue(bg) * (1.0f - alpha) + GetGValue(fg) * alpha);
    int b = (int)(GetBValue(bg) * (1.0f - alpha) + GetBValue(fg) * alpha);
    return RGB(r, g, b);
}

实现了基于 Alpha 通道的前景背景颜色混合，使抗锯齿边缘与背景自然融合。

2. 裁剪区域算法

使用 Windows GDI 的裁剪区域（Clip Region）实现：

• 菜单内容裁剪
• 滚动区域裁剪
• 防止绘制内容溢出边界

HDC hdc = GetImageHDC(NULL);
HRGN clip_region = CreateRectRgn(x1, y1, x2, y2);
SelectClipRgn(hdc, clip_region);
// 绑定绘制...
SelectClipRgn(hdc, NULL);
DeleteObject(clip_region);

3. 时区计算算法

实现了世界时钟的时区转换：

• 计算不同城市与本地时间的时差
• 处理日期变更（昨天/今天/明天）
• 12小时制与24小时制转换

---

技术架构

Clock/
├── main.cpp              # 主程序入口，消息循环
├── SDF.h/cpp             # 抗锯齿渲染系统
├── UIHelper.h/cpp        # UI 辅助函数（导航栏、按钮等）
├── WorldClockManager.h/cpp   # 世界时钟模块
├── TimeZone.h/cpp        # 时区数据和计算
├── AlarmManager.h/cpp    # 闹钟管理模块
├── AlarmEditDialog.h/cpp # 闹钟编辑对话框
├── AlarmNotification.h/cpp   # 闹钟通知条
├── AlarmSound.h/cpp      # 铃声播放系统
├── Alarm.h               # 闹钟数据结构
├── Stopwatch.h/cpp       # 秒表模块
├── TimerManager.h/cpp    # 计时器模块
├── TimerNotification.h/cpp   # 计时器通知条
├── Timer.h               # 计时器数据结构
└── sounds/               # 铃声资源文件夹

---

运行环境

• 操作系统：Windows 7/10/11
• 开发环境：Visual Studio 2019/2022
• 图形库：EasyX (2023版本)
• 编译方式：静态编译，可直接运行

---

操作说明

1. 切换模块：点击顶部导航栏的"世界时钟"、"闹钟"、"秒表"、"计时器"
2. 添加内容：点击右上角的 "+" 按钮
3. 滚动浏览：使用鼠标滚轮
4. 退出程序：点击左上角关闭按钮或按任意键