當 Gradient 漸層與遮色片效果一起使用時,可以為您的圖片帶來絢麗的效果,藉由 Gradient 漸層的角度與類型的變化來呈現出不同的感覺,請看以下程式碼示範。
在開始之前如果您對 Gradient 漸層、遮色片的應用或是 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];
最後結果就如同文章一開始的左圖,採用斜對角的線性漸層作為遮罩畫面。
沒有留言:
張貼留言