搜索
bottom↓
回复: 37

TFT屏上面做透明图标时,怎么样让背景和原图颜色不要混

[复制链接]

出0入90汤圆

发表于 2013-3-9 00:19:49 | 显示全部楼层 |阅读模式
最近在用STM32以及TFT以及触摸屏做东西,背景以及上面的图标都是用的图片。
因为背景图和图标都是矩形的,所以刷了背景图片后,要刷图标上去的时候就遇到问题了,肯定不能直接刷矩形的图片上去,因为那样的话会有很多空白色来影响背景图片。
参考坛里朋友的方法,把图标的空白部分换色一种紫色,在刷图标的时候遇到这种紫色的点就跳过去,然后终于出现效果了,没有那种丑陋的白色了。

但是,仔细一看,又发现了一点问题:我发现,还是有一些紫色显示出来了,不是完全没有紫色的。只不过有的紫色变了点点。
经过仔细研究发现。PHOTOSHOP里面,在透明的图标和背景色图层混合显示的时候,图标的边缘会和背景图层的边缘混色。
这就导致了,我的图标还是会显现一点点的紫色,这样还是不好看啊。希望各位弄过的兄弟告知一声。
怎么样在处理这种图片的时候,让图标和背景不要混色啊。

出0入93汤圆

发表于 2013-3-9 00:25:31 | 显示全部楼层
研究研究photoshop吧,每个工具都有一些参数可调的,调整一下就可以不在边缘混色了

出0入90汤圆

 楼主| 发表于 2013-3-9 00:28:37 | 显示全部楼层
就是研究了1-2个小时了还没出结果,百度也搜索不到不混色的办法,才来求助诸位的啊!我看到坛子里很多透明图标都做的很好看的!所以想问问看有没人知道怎么做嘛!

出0入0汤圆

发表于 2013-3-9 09:24:53 | 显示全部楼层
刚做完一个这样的案子,采用的方法就是你说的,图标转BMP的时候将图标透明的地方改为特定的颜色A,并且要保证颜色A在图标不透明的地方没有使用过。最好没有使用和A很相近的颜色。仔细看周边有几个碎点但基本能接受。

出0入0汤圆

发表于 2013-3-9 09:38:37 | 显示全部楼层
透明颜色处理有算法的   很简单的吧

  Alpha 透明度混合算法,网上收集整理,分成以下三种:

一、 R1,G1,B1,Alpha1 为前景颜色值,R2,G2,B2,Alpha2 为背景颜色值,则

        前景色  R = R1 * Alpha1 + R2 * Alpha2 * (1-Alpha1) ;

                   G = G1 * Alpha1 + G2 * Alpha2 * (1-Alpha1) ;

                   B = B1 * Alpha1 + B2 * Alpha2 * (1-Alpha1) ;

        背景色 Alpha = 1 - (1 - Alpha1) * ( 1 - Alpha2) ;

                   R = R / Alpha ;

                   G = G / Alpha ;

                   B = B / Alpha ;

二、半透明算法:
      混合算法目前在常用到的算法是AlphaBlend。
      计算公式如下:假设一幅图象是A,另一幅透明的图象是B,那么透过B去看A,看上去的图象C就是B和A的混合图象,
      设B图象的透明度为alpha(取值为0-1,1为完全透明,0为完全不透明).
      Alpha混合公式如下:
                  R(C)=(1-alpha)*R(B) + alpha*R(A)
                  G(C)=(1-alpha)*G(B) + alpha*G(A)
                  B(C)=(1-alpha)*B(B) + alpha*B(A)
      R(x)、G(x)、B(x)分别指颜色x的RGB分量原色值。从上面的公式可以知道,Alpha其实是一个决定混合透明度的数值。
      改变这个 alpha 值可以得到一个渐变的效果。

      分离RGB色用"位与"、"移位"运算的方法;

      透明的比例按2的N次幂来分级,这样可以快速运算。
      如果是按32级
      Alpha = 1/32
      B图的权重 = (32-n)/32,则A图的权重= n/32,

      可以得到这样的算法:

      R(C)= (32-n) * R(B)+ n* R(A);
     再对R(C)右移5位(除以32)就可以了

    透明的处理:
       假设指定B上的黑色透明色,则碰到B上的颜色为黑色,则不显示黑色,改为显示A上这个位置的颜色。



三、简易Alpha混合算法:首先,要能取得上层与下层颜色的 RGB三基色,

      然后用r,g,b 为最后取得的颜色值;r1,g1,b1是上层的颜色值;r2,g2,b2是下层颜色值

      若Alpha=透明度,则

      当Alpha=50%时,

                    r = r1/2 + r2/2;

                    g = g1/2 + g2/2;

                    b = b1/2 + b2/2;

      当Alpha<50%时,

                    r = r1 - r1/ALPHA + r2/ALPHA;

                    g = g1 - g1/ALPHA + g2/ALPHA;

                    b = b1 - b1/ALPHA + b2/ALPHA;

      当Alpha>50%时,

                    r = r1/ALPHA + r2 - r2/ALPHA;

                    g = g1/ALPHA + g2 - g2/ALPHA;

                    b = b1/ALPHA + b2 - b2/ALPHA;

出0入0汤圆

发表于 2013-3-9 09:39:22 | 显示全部楼层
还有就是 uCGUI 里面应该有源代码的   找找看  以前看过一些透明算法的资料  但是 没有实践过

出0入90汤圆

 楼主| 发表于 2013-3-9 09:51:58 | 显示全部楼层
就是不想去直接读了点之后再去运算打点啊,我是STM32,本身图片以及图标都是全部从SD卡读取,速度本身就有限制,一个背景图片刷上去就要1秒钟了,如果其他的图标都要读点再运算,再写入的话,肯定会更慢的。现在就是头疼PHOTOSHOP在加上背景色后会在边缘混色

出0入0汤圆

发表于 2013-3-9 10:56:38 | 显示全部楼层
赞成5楼的方法
把图标文件搞成32位的ARGB格式的bmp文件,一次读一行或几行
不过楼主用的几寸的屏,刷个背景图片都要1秒钟???

出0入90汤圆

 楼主| 发表于 2013-3-9 11:22:51 | 显示全部楼层
图片放到SD卡里面,刷背景不要1秒钟吗?你自己算下,1秒钟能从SD卡里面读多少K的数据呢?5楼的方法好是好,但是如果图片本身能处理好,就根本不需要去操心这个了

出0入0汤圆

发表于 2013-3-9 12:57:48 来自手机 | 显示全部楼层
honami520 发表于 2013-3-9 00:28
就是研究了1-2个小时了还没出结果,百度也搜索不到不混色的办法,才来求助诸位的啊!我看到坛子里很多透明 ...

你用百度么,找不到办法很正常。用Google 用英文,十分钟就必有答案。。。

出0入270汤圆

发表于 2013-3-9 13:53:50 | 显示全部楼层
Mark~~~~~~~

出0入0汤圆

发表于 2013-3-9 14:15:03 | 显示全部楼层
mark,用png图片显示

出0入90汤圆

 楼主| 发表于 2013-3-9 14:36:56 | 显示全部楼层
因为我是用图片,然后把图片转成BIN文件来用的。所以PNG也无效!我研究了这么久,终于发现为什么了,是因为原来的图标在边缘地带有一些像素是半透明的,这些半透明的像素就会和底色混色,造成现在的情况!还是photoshop水平差了!

出0入0汤圆

发表于 2013-3-10 17:05:48 | 显示全部楼层
stm32_boy 发表于 2013-3-9 09:38
透明颜色处理有算法的   很简单的吧

  Alpha 透明度混合算法,网上收集整理,分成以下三种:

mark                    

出0入0汤圆

发表于 2013-3-10 18:12:32 | 显示全部楼层
1.楼主应该有一些PS工具的经验
2.按楼主的方法,源图片的边缘不可以是无锯齿的。必须像【超级玛丽】那样。
3.要做得好,必须使用Alpha Blending,图片支持Alpha通道,即每个像素由R,G,B,A成分组成。
4.另外,使用LCM大部分用到 RGB565就够了,在上面这们网友的混合算法上,利用STM32的32位,可一次性混合RGB,Alpha仅能支持4位深,很适合LCM使用,网上有RGB565快速混合算法,去找找。

出0入0汤圆

发表于 2013-3-11 11:46:58 来自手机 | 显示全部楼层
我刚开始学习32,我在写液晶程序的时候图片不能正常显示,请教下:在图片取模之后,如何将所取模的数据合成显示(16位真彩色)

出0入0汤圆

发表于 2013-3-11 11:47:57 来自手机 | 显示全部楼层
我刚开始学习32,我在写液晶程序的时候图片不能正常显示,请教下:在图片取模之后,如何将所取模的数据合成显示(16位真彩色)的数据发送!其算法是怎样?

出0入0汤圆

发表于 2013-3-11 12:01:40 | 显示全部楼层
透明图片,用PNG格式

出0入0汤圆

发表于 2013-3-11 14:26:55 来自手机 | 显示全部楼层
请问楼主:(16位真彩色)的数据合成怎样处理,其算法是?(能给一下其代码)

出0入90汤圆

 楼主| 发表于 2013-3-11 23:33:25 | 显示全部楼层
用Img2lcd来转换的,算法又,但是单片机去做JPG,BMP解码太麻烦了,也慢

出0入0汤圆

发表于 2013-3-14 18:25:28 | 显示全部楼层
mark下,备用!

出0入0汤圆

发表于 2013-3-14 22:16:36 | 显示全部楼层
把背景图片放在RAM里

出0入0汤圆

发表于 2013-3-14 22:51:19 | 显示全部楼层
5楼的算法学习了

出0入0汤圆

发表于 2013-3-15 16:07:29 | 显示全部楼层
透明处理算法,看着很好的样子

出0入0汤圆

发表于 2013-4-28 09:19:07 | 显示全部楼层
zyw19987 发表于 2013-3-9 09:24
刚做完一个这样的案子,采用的方法就是你说的,图标转BMP的时候将图标透明的地方改为特定的颜色A,并且要保 ...

用的什么软件转的,目前手边的工具把ICON转BMP时,
都不能指定背景色,都是默认的白色!!

出0入0汤圆

发表于 2013-4-28 19:34:20 | 显示全部楼层
electrlife 发表于 2013-4-28 09:19
用的什么软件转的,目前手边的工具把ICON转BMP时,
都不能指定背景色,都是默认的白色!!  ...

我的图标文件都是美工提供的PS原文件,直接在原文件编辑就可以了。

出0入0汤圆

发表于 2013-4-29 08:00:29 来自手机 | 显示全部楼层
学习一下5楼  

出0入0汤圆

发表于 2013-4-29 08:20:51 | 显示全部楼层
用PNG图片格式

出0入0汤圆

发表于 2013-7-21 00:10:27 | 显示全部楼层
zyw19987 发表于 2013-3-9 09:24
刚做完一个这样的案子,采用的方法就是你说的,图标转BMP的时候将图标透明的地方改为特定的颜色A,并且要保 ...

我想问你下,这个怎么实现特定色A,为透明的,我设置
static GUI_CONST_STORAGE GUI_LOGPALETTE Paltime = {
  256,        /* number of entries */
  1,         /* No transparency */
  &Colorstime[0]
};
这个当中第二个参数为1的时候,可以实现透明,但是每次透明的颜色不确定,很是迷惑,这里一并请教了。

出0入0汤圆

发表于 2013-7-21 00:31:53 | 显示全部楼层
5楼的算法学习了

出0入0汤圆

发表于 2013-7-21 09:03:45 | 显示全部楼层
本帖最后由 zyw19987 于 2013-7-21 09:05 编辑
bingtuohun 发表于 2013-7-21 00:10
我想问你下,这个怎么实现特定色A,为透明的,我设置
static GUI_CONST_STORAGE GUI_LOGPALETTE Paltime  ...


比如你做的图片是圆形的,而写到屏上的时候是以矩形的数据宽度写入,这时在做圆形图标的时候,圆形以外的矩形以内的数据就填充成特定颜色A,这个A颜色不能再圆形中出现。写数据的时候,读取图片的时候判断当前要写入的图片数据是不是A,如果是就不写入,直接跳过这个地址,或者将原来屏上当前位置读出来,再写入(因为有些屏控制器不支持跳过)。这样呈现出来的就是圆形图标在屏上,圆形以外矩形以内的数据还是原来屏的数据了。还不明白,我也不知道怎么表达了。

出0入0汤圆

发表于 2013-7-21 09:13:07 | 显示全部楼层
这个我明白的。但是我对利用工具生成的结构体中,
static GUI_CONST_STORAGE GUI_LOGPALETTE Paltime = {
  256,        /* number of entries */
  1,         /* No transparency */
  &Colorstime[0]
};
这个当中第二个参数为1的时候,可以实现透明,但是每次透明的颜色不确定,很是迷惑。我转化2附图,结果一个是白色的地方是背景色,一个是黑色的地方是背景色。

出0入0汤圆

发表于 2013-7-21 09:16:03 | 显示全部楼层
用PS做,教程网上很多,只是要做好看,得要专业美工人员来做了。

出0入0汤圆

发表于 2013-7-21 16:32:48 | 显示全部楼层
赶紧学习一下

出0入0汤圆

发表于 2013-7-23 09:12:28 | 显示全部楼层


GUI_CONST_STORAGE GUI_BITMAP bmtime = {
  43, /* XSize */
  41, /* YSize */
  43, /* BytesPerLine */
  8, /* BitsPerPixel */
  actime,  /* Pointer to picture data (indices) */
  &Paltime  /* Pointer to palette */
};
static GUI_CONST_STORAGE GUI_LOGPALETTE Paltime = {
  64,        /* number of entries */
  1,         /* No transparency */
  &Colorstime[0]
};
这里Paltime第二个参数设置成1,结果
看这幅图片中的时钟是黑色部分被透明了,想问下为什么是黑色变成了透明色那,怎么修改其他颜色变成透明色。

本帖子中包含更多资源

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

x

出0入4汤圆

发表于 2014-6-18 15:09:10 | 显示全部楼层
mark,学习一下

出0入0汤圆

发表于 2017-6-9 15:42:55 | 显示全部楼层
stm32_boy 发表于 2013-3-9 09:38
透明颜色处理有算法的   很简单的吧

  Alpha 透明度混合算法,网上收集整理,分成以下三种:

透明颜色处理算法~~简易版
mask

出0入0汤圆

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

本版积分规则

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

GMT+8, 2024-4-30 21:13

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

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