效果图如下:

问题来源

公司的一个桥隧项目其中有个打分功能,领导觉得显示分数不友好,要改成颜色渐变条,然后上面有个指针指示现在处于什么预警状态下,颜色由绿->黄->橙->红依次渐变,预警值区间设定为:

0-0.4:绿到黄渐变。
0.4-0.8:黄到橙渐变。
0.8-1:橙到红渐变。

由于时间紧,想寻找是否有类似的控件可以直接使用,结果没有。所以只好自己写一个,思路是借用TeeChart控件的ColorGrid功能。

生成渐变色

绿色RGB(0,255,0), 黄色RGB(255,255,0), 橙色RGB(255,165,0), 红色RGB(255,0,0)

绿色->黄色:R由0->255 线性过渡
黄色->橙色:G由255->165 线性过渡
橙色->红色:G由165->0 线性过渡

既然属于线性过渡,所以他们之间的关系属于等比关系。拿绿色->黄色举例,假设当前的预警值为V,该预警值对应的R值设为X,此时就存在四种关系:

  1. 预警值:0-0.4    minV –  maxV
  2. 当前值:0-V     minV – V
  3. 总R值变化:0-255     minColor – maxColor
  4. 预警值R值变化:0-X    minColor – X

SO:列出一个等比公式:(maxV – minV)/ (V – minV) = (maxColor – minColor) / (X – minColor) ;

设 DValue = maxV – minV
则 X = (V – minV) * (maxColor – minColor) / DValue + minColor。

所以求X代码如下:

根据预警值求对应的RGB

绘制渐变图形和指针

到此,就可以生成开头图片中的效果,可能现在看起来还有点单调,有兴趣的朋友可以再丰富一下。


微信支付宝

如果本文帮助到您,请随意打赏作者