圆形进度条

你不丑

配合AI写的 自己稍微改了一点点  AI太强大了 建议各位拥抱AI  

这个“圆形水波纹进度条”虽然只是一个 UI 组件，但它的内部其实蕴含了计算机图形学（CG）、三角函数数学建模以及 Windows 操作系统底层绘图机制（GDI） 的深度结合。

以下是它所用到的核心技术与算法的详细解密：

---

一、 核心算法：基于三角函数的水波生成

技术点：正弦波（Sine Wave）数学建模

在自然界中，波浪的起伏可以用完美的数学公式来描述。代码中生成水波的核心公式是：

Y=振幅×sin⁡(频率×X+相位)+基准线YY=振幅×sin(频率×X+相位)+基准线Y

• 振幅 (Amplitude)：决定波浪的“浪高”。

  
  

  • 优化细节：为了让水波在 0% 和 100% 时看起来更自然（不溢出边界），代码中使用了 振幅 = 6 * sin(当前进度比例 * PI)。这意味着在 50% 进度时波浪最高（6像素），而在空满状态时水面平静如镜。

    
    

• 频率 (Frequency)：决定波浪的“密集程度”。代码中写死的 0.05 就是频率因子，让波浪看起来舒缓而不密集。

• 相位 (Phase) / 动画引擎：决定波浪横向移动的位置。

  
  

  • hei科技：常规做法是用一个时钟周期不断给变量加 1。但我使用了 取启动时间 () ÷ 150.0 作为相位。系统时间永远在流逝，这就形成了一个永不停止的“天然动画引擎”。只要你反复调用这个子程序，水波就会自己向右平滑流动，完全不需要你维护状态变量。

    
    
  
  

---

二、 核心算法：纯数学切边（代替 API 裁剪）

技术点：圆的解析几何方程

原本要在方形画板里画一个圆，且水波不能出界，最简单的做法是调用 GDI 的 SelectClipRgn（区域裁剪）。但那个 API 很容易在易语言自动重画机制下失效导致黑屏。

因此，我采用了**“逐列渲染 + 数学边界约束”**的硬核算法。

• 圆的方程：

  [size=1.21em](X−圆心X)2+(Y−圆心Y)2=R2(X−圆心X)2+(Y−圆心Y)2=R2

• 推导 Y 的边界：对于任意横坐标

  [size=1.21em]XX，它在圆内部的合法垂直区间可以通过勾股定理算出来：
  
  半弦长(dy)=R2−dx2半弦长(dy)=R2−dx2​
  
  （其中 [size=1.21em]dxdx 是当前 [size=1.21em]XX 距离圆心的横向偏差）。

• 计算上下顶点：

  
  

  • 这根竖线在圆内的最高点：圆顶Y = 圆心Y - 半弦长

  • 这根竖线在圆内的最低点：圆底Y = 圆心Y + 半弦长

    
    

• 智能约束（Clipping）：

  
  

  • 计算出水波曲线当前的

    [size=1.21em]YY 坐标（[size=1em]波浪Y）。

  • 画线起点 = 和 （防止水波画到圆环上方外面去）。

  • 画线终点 = 圆底Y。

  • 在这个区间内 LineTo 画一条蓝色的竖线。当无数根这样长度不一的垂直蓝色像素线紧密排列在一起时，就拼成了一个完美的、绝不出界的水波圆形。

    
    
  
  

---

三、 底层技术：GDI 双缓冲防闪烁

技术点：Double Buffering (双缓冲内存绘图)

如果你直接在屏幕（画板组件）上画画：清空画布（白屏）-> 画圆框 -> 逐列画波浪线 -> 画文字。
因为是一帧一帧在屏幕上操作的，人眼会看到画布被清空的瞬间，这就是**“闪烁（Flicker）”**的万恶之源。

双缓冲的原理（好比电影放映机）：

• 幕后操作：在计算机内存中申请一块和画板一样大的“隐形画布”（CreateCompatibleBitmap）。

• 闭门造车：所有的清空背景、画框、画波浪、写字，全都在这块看不见的内存画布上进行。因为在内存中修改像素的速度极快，且不输出到显示器，所以怎么画都不会闪。

• 瞬间贴图：当内存里这张图彻底画完后，使用 BitBlt 命令，将这块内存图像一次性、瞬间覆盖贴到屏幕的画板上。

• 人眼看到的，永远是一张张已经画好的完整静态图片在快速切换，因此达到了极致丝滑、绝对零闪烁的电竞级渲染效果。

  
  

---

四、 底层技术：GDI 文本完美居中

技术点：字体逻辑对象与精确像素测量

易语言自带的 取文本宽度 有时会受系统 DPI 缩放影响，或者在没画出来之前算不准。

为了让“88%”这种文字绝对死死钉在圆心正中间：

• 创建逻辑字体：使用 CreateFontA，利用圆的半径动态计算字体大小，确保无论画板多大，字体比例永远和谐。

• 像素级测量：使用 GetTextExtentPoint32A。这个 API 会拿着你选好的字体，在内存中模拟排版这串字符，然后精确返回它将占用多少个像素的宽和高（存在 结构_尺寸 中）。

• 绝对居中公式：起点X = 圆心X - (文本真实宽度 / 2)。

• 智能变色：判断当前水位的比例，如果水淹过了 55%（盖住了圆心），文字自动反转为白色，否则是深**。保证在任何进度下都能清晰阅读。

  
  

---

ytcsj

感谢分享

kiss0459

支持一下

huxian

用的什么AI啊