搜索
bottom↓
回复: 15

将一个颜色渐变到另一个颜色,大家有没有好的插值算法?

[复制链接]

出0入0汤圆

发表于 2013-9-3 08:13:54 | 显示全部楼层 |阅读模式
最近在搞GUI,用到颜色渐变,试了下网上的简单的插值算法,发现会出现阶梯线性,颜色不能平滑过渡,应该是算法过于简陋。求教。

阿莫论坛20周年了!感谢大家的支持与爱护!!

一只鸟敢站在脆弱的枝条上歇脚,它依仗的不是枝条不会断,而是自己有翅膀,会飞。

出0入0汤圆

 楼主| 发表于 2013-9-3 08:14:36 | 显示全部楼层
下面这段话大家看看神马意思。

教你个利用双线性插值的方法,我是学VB的,C的不懂,代码就不能贴了,只能说下如何运算..剩下的就要靠你自己了1.首先计算缩放比例..bl=2/w...2是原图宽度(因为只有2个颜色)...w是放大后的宽度2.开始循环,从1循环到目标宽度w,假设循环变量为i...就用n=i*bl3.取出n的小数部分存到变量p中..然后合成颜色,目标色R=R1*(1-p)+R2*p G=G1*(1-P)+G2*p B=B1*(1-P)+B2*p....R1/G1/B1是起始色的红/绿/蓝色,R2/G2/B2是结束色的红/绿/蓝色.这个算法是什么原理呢,我说一下,算出的n=i*bl就是一个小数值.假如他是1.3,那么他靠1颜色就近些,所以1颜色对他的影响就大,所以R1*(1-p)+R2*p就体现了1颜色影响的范围大,2颜色影响小..假如是1.7,那么2颜色对他的影响大,1就小....所以他呈现渐变分布..而双线性插值一般用语图像放大缩小..

出0入0汤圆

发表于 2013-9-3 08:54:10 | 显示全部楼层
advarx21ic 发表于 2013-9-3 08:14
下面这段话大家看看神马意思。

教你个利用双线性插值的方法,我是学VB的,C的不懂,代码就不能贴了,只能说下 ...

看不懂

出0入0汤圆

发表于 2013-9-3 09:01:16 | 显示全部楼层
感觉好像很高深的样子哎,看不懂!

出0入0汤圆

 楼主| 发表于 2013-9-3 09:06:49 | 显示全部楼层
试了下上面的公式,在单色渐变时是不好用的.例如从深蓝变到浅蓝,将一样出现颜色阶梯.

出0入0汤圆

发表于 2013-9-3 09:15:53 | 显示全部楼层
不能直接把 RGB 的值每次 加或减1 到最终的 RGB 么?

出0入442汤圆

发表于 2013-9-3 09:17:13 | 显示全部楼层
如果出现肉眼能看到的颜色渐变,那么通常是因为LCD色彩位数不够,比如PC机16位色时,基本上色彩过渡是必然的,因为就算绿色,也不过只有64种灰度值,其它颜色更少,只有32种灰度值。LZ的屏估计是16位色(65,536色)的,所以看不到渐变才是怪事。除非,使用颜色抖动来实现平滑过渡。

出235入235汤圆

发表于 2013-9-3 13:11:06 | 显示全部楼层


是这种吗?
  1. void Hsv2Rgb(float H, float S, float V, float &R, float &G, float &B)
  2. {
  3.      int i;
  4.     float f, p, q, t;

  5.     if( S == 0 )
  6.     {
  7.     // achromatic (grey)
  8.         R = G = B = V;
  9.         return;
  10.     }

  11.     H /= 60; // sector 0 to 5
  12.     i = floor( H );
  13.     f = H - i; // factorial part of h
  14.     p = V * ( 1 - S );
  15.     q = V * ( 1 - S * f );
  16.     t = V * ( 1 - S * ( 1 - f ) );

  17.     switch( i )
  18.     {
  19.     case 0:
  20.         R = V;
  21.         G = t;
  22.         B = p;
  23.        break;
  24.     case 1:
  25.        R = q;
  26.        G = V;
  27.        B = p;
  28.        break;
  29.     case 2:
  30.        R = p;
  31.        G = V;
  32.        B = t;
  33.        break;
  34.     case 3:
  35.        R = p;
  36.        G = q;
  37.        B = V;
  38.        break;
  39.     case 4:
  40.        R = t;
  41.        G = p;
  42.        B = V;
  43.        break;
  44.     default: // case 5:
  45.        R = V;
  46.        G = p;
  47.        B = q;
  48.        break;
  49.     }
  50. }
复制代码
Hsv2Rgb((float)(i), 1, 1, r, g, b);
i从0->240对应蓝色到红色。
搜索一下HSV

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x

出0入0汤圆

发表于 2013-9-3 13:14:46 | 显示全部楼层
本帖最后由 kelp 于 2013-9-3 13:15 编辑

可以在HSV空间中做处理。
如果要改变颜色,就修改色度分量, 如果要改变亮度,就修改亮度分量。

出0入0汤圆

 楼主| 发表于 2013-9-3 14:54:30 | 显示全部楼层
本帖最后由 advarx21ic 于 2013-9-3 15:04 编辑
wye11083 发表于 2013-9-3 09:17
如果出现肉眼能看到的颜色渐变,那么通常是因为LCD色彩位数不够,比如PC机16位色时,基本上色彩过渡是必然 ...


是的,我的屏用了RGB565模式.

出0入0汤圆

 楼主| 发表于 2013-9-3 15:03:58 | 显示全部楼层
lyping1987 发表于 2013-9-3 13:11
是这种吗?Hsv2Rgb((float)(i), 1, 1, r, g, b);
i从0->240对应蓝色到红色。
搜索一下HSV ...

类似这个,但确切地说是单一颜色就可以了。例如从深蓝变到浅蓝。在实践过程中发现,在电脑上模拟是可以的,但是到了实际目标系统就会出现颜色阶梯化的现象。原因应该是我的屏的位宽才16位565结构。

出0入0汤圆

 楼主| 发表于 2013-9-3 15:40:34 | 显示全部楼层
本贴图片是在我的16位LCD上显示的效果,有非常明细的阶梯。图片上可能比较模糊。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x

出0入0汤圆

发表于 2015-8-21 11:30:32 | 显示全部楼层
正好需要,从红色到蓝色渐变效果

出0入0汤圆

发表于 2016-5-20 09:58:36 | 显示全部楼层
lyping1987 发表于 2013-9-3 13:11
是这种吗?Hsv2Rgb((float)(i), 1, 1, r, g, b);
i从0->240对应蓝色到红色。
搜索一下HSV ...

你这可以的  谢啦

出0入0汤圆

发表于 2016-9-21 18:40:49 | 显示全部楼层

mark..........

出0入0汤圆

发表于 2016-9-26 11:03:30 来自手机 | 显示全部楼层
用图片最简单
回帖提示: 反政府言论将被立即封锁ID 在按“提交”前,请自问一下:我这样表达会给举报吗,会给自己惹麻烦吗? 另外:尽量不要使用Mark、顶等没有意义的回复。不得大量使用大字体和彩色字。【本论坛不允许直接上传手机拍摄图片,浪费大家下载带宽和论坛服务器空间,请压缩后(图片小于1兆)才上传。压缩方法可以在微信里面发给自己(不要勾选“原图),然后下载,就能得到压缩后的图片】。另外,手机版只能上传图片,要上传附件需要切换到电脑版(不需要使用电脑,手机上切换到电脑版就行,页面底部)。
您需要登录后才可以回帖 登录 | 注册

本版积分规则

手机版|Archiver|amobbs.com 阿莫电子技术论坛 ( 粤ICP备2022115958号, 版权所有:东莞阿莫电子贸易商行 创办于2004年 (公安交互式论坛备案:44190002001997 ) )

GMT+8, 2024-3-29 19:57

© Since 2004 www.amobbs.com, 原www.ourdev.cn, 原www.ouravr.com

快速回复 返回顶部 返回列表