设计:建立一个扇形遮罩,再建立一个两色径向渐变圆,用扇形遮罩去剪切径向渐变圆,就获得一个两色线性径向渐变扇形.java
一.先建立一个扇形遮罩.(里面的函数代码什么意义,按住command,点函数名就可进去看了)ios
1.建立一个四分之七(这个数随便定)的扇形.下面代码放入- (void)drawRect:(CGRect)rect方法,若是在init赋初值(_c为中心点,_radius为半径),运行就可看到一个红色的四分七扇形了.这里的color不要用black和white哦函数
CGContextRef imgCtx = UIGraphicsGetCurrentContext(); CGContextMoveToPoint(imgCtx, _c.x,_c.y); CGContextSetFillColor(imgCtx, CGColorGetComponents([UIColor redColor].CGColor)); CGContextAddArc(imgCtx, _c.x, _c.y, _r, -M_PI/2, 5*M_PI/4, 0); CGContextFillPath(imgCtx);2.把它放入到一个ImageContext,并保留下来,就算一个遮罩mask了.不用去运行,运行什么也看不到.
UIGraphicsBeginImageContext(rect.size); CGContextRef imgCtx = UIGraphicsGetCurrentContext(); CGContextMoveToPoint(imgCtx, _c.x,_c.y); CGContextSetFillColor(imgCtx, CGColorGetComponents([UIColor redColor].CGColor)); CGContextAddArc(imgCtx, _c.x, _c.y, _r, -M_PI/2, 5*M_PI/4, 0); CGContextFillPath(imgCtx); //save the context content into the image mask CGImageRef mask = CGBitmapContextCreateImage(UIGraphicsGetCurrentContext()); UIGraphicsEndImageContext();3.顺便也把剪切写好吧.运行同样,什么也看不了.注意ctx和上面的imgCtx是两个context
CGContextRef ctx = UIGraphicsGetCurrentContext(); UIGraphicsBeginImageContext(rect.size); CGContextRef imgCtx = UIGraphicsGetCurrentContext(); CGContextMoveToPoint(imgCtx, _c.x,_c.y); CGContextSetFillColor(imgCtx, CGColorGetComponents([UIColor redColor].CGColor)); CGContextAddArc(imgCtx, _c.x, _c.y, _r, -M_PI/2, 5*M_PI/4, 0); CGContextFillPath(imgCtx); //save the context content into the image mask CGImageRef mask = CGBitmapContextCreateImage(UIGraphicsGetCurrentContext()); UIGraphicsEndImageContext(); CGContextClipToMask(ctx, self.bounds, mask); CGImageRelease(mask);
1.使用CGGradientCreateWithColorComponents建立渐变须要四参数.space,components[], locations[],count.使用CGColorSpaceCreateDeviceRGB()就可获得一个space;建立的是线性(均匀)的,将locations[]设为NULL;count是两色,设为2;components[]就看下面代码,两种方法建立:ui
方法A:spa
UIColor *startColor=[UIColor yellowColor]; UIColor *endColor= [UIColor blueColor]; UIColor *colors[2] = {startColor,endColor}; CGFloat components[2*4]; for (int i = 0; i < 2; i++) { CGColorRef tmpcolorRef = colors[i].CGColor; const CGFloat *tmpcomponents = CGColorGetComponents(tmpcolorRef); for (int j = 0; j < 4; j++) { components[i * 4 + j] = tmpcomponents[j]; } }
方法B:.net
CGFloat components[8]={ 1.0, 1.0, 0.0, 1.0, //start color(r,g,b,alpha) 0.0, 0.0, 1.0, 1.0 //end color };这两种方法的颜色rgb和alpha都好控制.那我就用B方法建立渐变吧,不要忘了release.终于建立了gradient.这段时间运行看不到效果,没必要去运行了.
CGFloat components[8]={ 1.0, 1.0, 0.0, 1.0, //start color(r,g,b,alpha) 0.0, 0.0, 1.0, 1.0 //end color }; CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB(); CGGradientRef gradient = CGGradientCreateWithColorComponents(space, components, NULL,2); CGColorSpaceRelease(space),space=NULL;//release
2.CGContextDrawRadialGradient方法须要7参数,上面只搞定了gradient,剩下一个一个给吧.设计
CGPoint start = _c; CGPoint end = _c; CGFloat startRadius = 0.0f; CGFloat endRadius = _r; CGContextRef graCtx = UIGraphicsGetCurrentContext(); CGContextDrawRadialGradient(graCtx, gradient, start, startRadius, end, endRadius, 0); CGGradientRelease(gradient),gradient=NULL;//release
三.最后调整,拼接.画扇形的color改成black,起始弧度,结束弧度,画弧方向都调整下.code
CGContextRef ctx = UIGraphicsGetCurrentContext(); UIGraphicsBeginImageContext(rect.size); CGContextRef imgCtx = UIGraphicsGetCurrentContext(); CGContextMoveToPoint(imgCtx, _c.x,_c.y); CGContextSetFillColor(imgCtx, CGColorGetComponents([UIColor blackColor].CGColor)); CGContextAddArc(imgCtx, _c.x, _c.y, _r, M_PI/2, -5*M_PI/4, 1); CGContextFillPath(imgCtx); //save the context content into the image mask CGImageRef mask = CGBitmapContextCreateImage(UIGraphicsGetCurrentContext()); UIGraphicsEndImageContext(); CGContextClipToMask(ctx, self.bounds, mask); CGFloat components[8]={ 1.0, 1.0, 0.0, 1.0, //start color(r,g,b,alpha) 0.0, 0.0, 1.0, 1.0 //end color }; CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB(); CGGradientRef gradient = CGGradientCreateWithColorComponents(space, components, NULL,2); CGColorSpaceRelease(space),space=NULL;//release CGPoint start = _c; CGPoint end = _c; CGFloat startRadius = 0.0f; CGFloat endRadius = _r; CGContextRef graCtx = UIGraphicsGetCurrentContext(); CGContextDrawRadialGradient(graCtx, gradient, start, startRadius, end, endRadius, 0); CGGradientRelease(gradient),gradient=NULL;//release
完整代码下载:component
http://download.csdn.net/detail/xiejx618/6018683
blog
参考的文章有:
http://www.thinkandbuild.it/how-to-build-a-custom-control-in-ios/
http://kongkongbrain.blog.163.com/blog/static/178199013201110233366847/