Gradient 漸層與遮色片的應用

 

當 Gradient 漸層與遮色片效果一起使用時，可以為您的圖片帶來絢麗的效果，藉由  Gradient 漸層的角度與類型的變化來呈現出不同的感覺，請看以下程式碼示範。

在開始之前如果您對 Gradient 漸層、遮色片的應用或是 CoreGraphics 不是很熟悉的朋友，可以參考以下三篇文章。

• 繪製漸層顏色 Gradient 的方法
• CoreGraphics 遮色片應用
• CoreGraphics 的基本繪圖方式

首先是原始影像，與遮色片影像的建立。

//原始影像
UIImage *iconImage = [UIImage imageNamed:@"icon.png"];

//製作遮罩用的漸層
CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
CGFloat components[] = {0.0, 0.0, 0.0, 0.0,
                        0.0, 0.0, 0.0, 1.0};
CGFloat locations[] = {0.2, 0.7};
size_t count = 2;
CGGradientRef gradient = CGGradientCreateWithColorComponents(rgb, components, locations, count);
CGColorSpaceRelease(rgb);

UIGraphicsBeginImageContext(iconImage.size);
CGContextRef context = UIGraphicsGetCurrentContext();

//製作斜對角的線性漸層
CGContextDrawLinearGradient(context, gradient, CGPointMake(256.0, 256), CGPointMake(0.0, 0.0), 0);
CGContextSaveGState(context);

//遮罩用漸層影像
UIImage *maskImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

上述程式碼分別產生兩個 UIImage iconImage 和 maskImage，接下來就要使用這兩個 UIImage 來製作遮片效果，其程式瑪如下。

//設定顯示的ImageView
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(10.0, 150.0, 256.0, 256.0)];
imageView.center = self.view.center;

//設定參考範圍
UIGraphicsBeginImageContext(imageView.frame.size);
context = UIGraphicsGetCurrentContext();
CGContextScaleCTM(context, 1, -1);

CGContextTranslateCTM(context, 0, -imageView.frame.size.height);
CGRect clipRect = CGRectMake(0.0, 0.0, iconImage.size.width, iconImage.size.height);

CGContextClipToMask(context, clipRect, maskImage.CGImage);
CGContextDrawImage(context, clipRect, iconImage.CGImage);
imageView.image = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

//顯示於畫面
[self.view addSubview:imageView];
[imageView release];

最後結果就如同文章一開始的左圖，採用斜對角的線性漸層作為遮罩畫面。