存档

2011年1月 的存档

图片的alpha算法

2011年1月13日 没有评论

不少程序中,都使用半透明的效果。虽然现有的api或者控件都提供这个功能,但某些情况下,还需要了解一下alpha算法。

假设2张图片为A和B,合成图片为C,以RGBA都是8bit为例。在PNG-24下,alpha 255表示不透明,0表示全透明。

C的每个像素RGB值是分别计算的。那么对于A和B的每一个像素,目标像素RGB值为

Rc = (Ra*alpha + Rb*(255-alpha))/255

Gc = (Ga*alpha + Gb*(255-alpha))/255

Bc = (Ba*alpha + Bb*(255-alpha))/255

在我的上一个iPhone应用里,要模拟iPhone界面。在iPhone锁定屏幕里,最后面是用户设置的背景,前面有若干alpha值不同的控件。如果要使用控件做到完整的模拟,因为不知道alpha值,要不断调整测试(并且不同位置的alpha值不同)。我想到一个办法就是用一张全屏图片来做出所有控件背景效果,然后在上面用背景透明的UILabel显示文字。

如何得到这张需要的图片呢?看上面的公式,如果我用全白RGB(255,255,255)和全黑RGB(0,0,0)做背景图片,就可以推导出alpha的值了。

alpha = 255 + R(black) – R(white)

下面的事情很简单了,做一个全白色图片和全黑色图片,分别设置成背景,然后截屏。

IMG_0578 IMG_0579

写个程序,用上面方法计算叠加图片的RGBA:

overlay

最后,用图片编辑工具将不需要的文字和滑块修改掉,就得到最终图片。在IB里,放两个重叠在一起的UIImage,后面的放正常背景图片,前面使用刚刚生成的图片,背景透明,最前面是UILabel的文字和UISlider滑块,就得到可以和iPhone以假乱真的界面。(下面的图片没有调整文字)

overlayoverlay1

分类: Android, iOS 标签:

定制UISlider

2011年1月13日 没有评论

刚刚向App Store提交了一个小应用,做了一个模拟来电的界面,里面用UISlider实现了slide to answer。

搜索slide to unlock,可以找到不少实现的代码,比如在这里提到的SlideToCancel。我做的就是基于这个代码。

直接运行这个代码,会发现可以看到UISlider的滑轨(track)。可以通过setMinimumTrackImage / setMaximumTrackImage来修改。但这里如果把nil作为参数,并不是表示不显示,而是使用缺省的。可以用一个透明的图片传给这两个函数,就“隐藏”track了。

随着滑块向右滑动,下面的slide to cancel会逐渐消隐,这是通过设置label的alpha实现的。当滑动到中间的某个位置时,手离开屏幕,滑块就会回到左侧,但这个代码里忘记了将label的alpha设置为1。可以在sliderUp中添加一个设置alpha为1的animation。

这个代码还有个问题,就是当滑动到中间的时候手指一动到UISlider之外再离开,滑块就不会回到最左侧。解决办法也很简单,把touch up outside同样指向sliderUp就可以了。

这个代码是用代码生成UISlider,但如果使用IB的话,是不能调整slider的高度,会造成即使thumb很大,可以拖拽的区域还是很小。要解决这个问题,需要自己继承UISlider,实现pointInside:

– (BOOL) pointInside:(CGPoint)point withEvent:(UIEvent*)event {
CGRect bounds = self.bounds;
bounds = CGRectInset(bounds, 0, (23.0-SIZE_Y)/2);
return CGRectContainsPoint(bounds, point);
}

UISlider的缺省高度是23,通过CGRectInset调整到SIZE_Y大小。

另外,对于slide to cancel几个字符的处理,这里是按照字节拆分的,不能用在中文上。如果使用一个图片叠加在字符上,通过设置图片的alpha来实现search light效果,就不会收文字编码限制了,即使是后面是图片也没有问题。

分类: iOS 标签:

老图片:2004/12/27:人民币历史汇率

2011年1月12日 没有评论

0

分类: 图片 标签:

老图片:2005至2006年北京93号汽油价格

2011年1月12日 没有评论

整理硬盘,看到这张图片:

2005至2006年北京93号汽油价格

 

0525001702_1

 

0525001702_0

分类: 图片 标签: