如何在图像上实现alpha渐变?

时间:2011-05-06 08:25:14

标签: iphone ios gradient alpha quartz-2d

我想在图像上实现alpha渐变。从图像顶部的0.5 alfa到底部的0.0。 欢迎任何建议,教程和链接。

4 个答案:

答案 0 :(得分:25)

您可以使用CGImageCreateWithMask向其应用蒙版图像。您可以通过使用CGContextDrawLinearGradient绘制到灰度或仅alpha的CGBitmapContext来简单地生成适当的蒙版。

如果它显示为CALayer的内容,您可以将适当的遮罩层应用于父图层的mask属性。您可以使用具有适当颜色的CAGradientLayer来创建此蒙版。

您可以将图像绘制到CGBitmapContext,然后使用kCGBlendModeDestinationIn在其上绘制适当的Alpha渐变。或者先绘制渐变,然后使用kCGBlendModeSourceIn在其上绘制图像。在这两种情况下,CGContextDrawLinearGradient再次成为你的朋友。然后,当然,使用基础数据缓冲区上的CGBitmapContextCreateImageCGImageCreate从CGContext中获取图像。

或者,当然,如果您控制原始图像并且从不需要没有alpha渐变的版本,您可以将其作为具有相应Alpha值的PNG存储起来。

答案 1 :(得分:6)

您可以尝试CAGradientLayer

UIView *view = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 100)] autorelease];
 CAGradientLayer *gradient = [CAGradientLayer layer];
 gradient.frame = view.bounds;
 gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor blackColor] CGColor], (id)[[UIColor whiteColor] CGColor], nil];
 [view.layer insertSublayer:gradient atIndex:0];

另一个选项

在之前的@Caleb

中尝试SO question建议的答案
  

你可以去Graphics Contexts。   所有绘图都在图形中进行   上下文。如果你想创建一个   具有径向渐变的图像,或a   线性渐变,或其他任何东西,   你需要:

     
      
  • 使用
    为图像创建图形上下文   UIGraphicsBeginImageContextWithOptions
  •   
  • 执行您想要在图像中显示的任何图形。
  •   
  • 致电UIGraphicsGetImageFromCurrentImageContext   从上下文中获取图像。
      这会给你一个UIImage,所以没必要   要转换自CGImage
  •   
  • 调用UIGraphicsEndImageContext清理上下文。
  •   
     

您还可以查看Radial gradient on UImage

答案 2 :(得分:2)

通过逐行读取现有图像中的像素(获取RGBA)来创建新图像,将它们添加到具有相同RGB值的新图像,但是逐行调整alpha值。

其他一些SO问题可以为您提供所需的一切:

How to get pixel data from a UIImage (Cocoa Touch) or CGImage (Core Graphics)?

Can I edit the pixels of the UIImage's property CGImage

答案 3 :(得分:1)

我找到了here的东西, 它很棒!

AlphaGradientView* gradient = [[AlphaGradientView alloc] initWithFrame:
                           CGRectMake(self.view.frame.size.width - 150, 0, 150, 
                                                self.view.frame.size.height)];

gradient.color = [UIColor yellowColor];
gradient.direction = GRADIENT_RIGHT;
[self.view addSubview:gradient];