UIImage 混合模式问题

Posted

技术标签:

【中文标题】UIImage 混合模式问题【英文标题】:UIImage Blend Mode Problems 【发布时间】:2012-07-15 05:54:44 【问题描述】:

我正在尝试叠加 2 张图片。底部图像从图像库加载到一个 alpha 设置为 1.0 的 UIImageView 对象。此图像中的所有像素的 alpha 值也为 1.0。我在上下文中创建的第二个图像。此图像的 alpha 值因像素而异。在上下文中创建第二个图像后,我将其绘制到显示在第一个 UIImageView 顶部的第二个 UIImageView。这第二个 UIImageView 也有一个设置为 1.0 的 alpha。两个 UIImageView 的背景属性都设置为 clear。

我试图在运行时使用滑块更改第二张图像中像素的单个 alpha 值,但是,我无法让第二张图像的 RGB 值与第一张图像正确混合。我不想基于亮度、黑暗等进行混合。似乎我想要 kCGBlendModeCopy,但这似乎仍然基于亮度或其他一些参数进行混合。

为了帮助可视化问题:想象一下我的底部 UIImageView 是一张人的照片。我的顶部 UIImageView 由 2 个实心分隔的圆圈组成; 1 个红色和 1 个绿色。使用滑块,如果我将红色像素的 alpha 值从 0.0 更改为 1.0 并返回,那么红色圆圈应该淡入为纯红色,并顺利淡出。

我可以通过将 RGB 数据数组值设置为等于 alpha 值并将 alpha 值设置为 1.0 来验证我的 alpha 值是否正常工作。这显示了一个黑色圆圈逐渐变白并返回。

这是我用来创建第二个图像的代码,它覆盖在第一个图像上。

//image <-- is the name of the second UIImageView that's passed to this method
//rgbaDataNew <-- is the name of my pixel data array for the second image

CGContextRef context;
CGImageRef imageRef;    
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

context = CGBitmapContextCreate(rgbaDataNew, width, height, 8, 4 * width, colorSpace, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big); 
imageRef = CGBitmapContextCreateImage (context);
UIImage * topImage = [UIImage imageWithCGImage:imageRef];

CGContextSetBlendMode(context, kCGBlendModeCopy);
CGContextDrawImage(context, CGRectMake(0, 0, width, height), [topImage CGImage]);

image.image = [UIImage imageWithCGImage:CGBitmapContextCreateImage (context)];

CGColorSpaceRelease(colorSpace);    
CGContextRelease(context);  
CGImageRelease(imageRef);

【问题讨论】:

你不能把一个图像视图放在另一个上面,然后将最上面的图像视图的opaque属性设置为NO吗? 试过了,但它不会改变结果。感谢您的回复! 【参考方案1】:

我会以稍微不同的方式解决这个问题,但它会涉及到少量的 Quartz 工作。

创建一个 UIView 子类并将第一个 imageView 添加为属性,以及一些其他值来定义您想要对叠加层执行的操作。

在子类的drawRect中,先使用UIImageView的-(void)drawInRect:(CGRect)rect方法绘制图像。

然后您可以使用 Quartz 在图像上按您想要的方式绘制对象(使用视图的属性为您提供框架、颜色、不透明度等。您可以使用 Quartz 轻松找到示例代码。

或者,如果你真的想使用第二个imageView,那么你可以在绘制底部视图之后,使用第二个视图的 - (void)drawInRect:(CGRect)rect blendMode:(CGBlendMode)blendMode alpha:(CGFloat)覆盖它的 alpha 方法。

在任何一种情况下,您都使用 UIView 子类。

【讨论】:

感谢您的回复。不幸的是,我没有绘制诸如实心红色圆圈等对象。我正在尝试覆盖 2 个复杂图像并更改顶部图像中某些像素的 alpha 以允许下部图像的某些部分显示出来。那有意义吗?抱歉,如果我误解了您的回复。再次感谢! 然后使用我提到的替代方法。你有两个 UIImageViews。您设置框架,然后通过调用其 drawRect 方法绘制第一个框架。然后您使用复杂的 drawInRect 方法进行第二个 - 这样您就可以更改其混合模式和 alpha。

以上是关于UIImage 混合模式问题的主要内容,如果未能解决你的问题,请参考以下文章

如何在颤振中使用混合混合模式?

Blend混合模式 与 20余种颜色混合模式代码实现

混合模式汇编异常[重复]

CSS3混合模式

chrome中的Chrome css3混合混合模式错误

Photoshop的混合模式