en

hi, it seems you are using microsoft internet explorer. it doesn't match web standard and causes problems browsing this site. please please please use mozilla firefox or google chrome instead. thank you!

zh

哦哦!您正在使用Internet Explorer 瀏覽器,它與我們的網頁標準並不相容,可能會導致畫面顯示不正常。
請改用 Mozilla Firefox 或者 Google Chrome 才能正常瀏覽本網站,謝謝!

7.14.2011

Gradient 漸層與遮色片的應用

 

當 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];

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






沒有留言:

張貼留言