您的位置:首页 > 移动开发 > IOS开发

iOS7 使用Core Graphics 和 Core Image

2014-06-06 16:33 162 查看
绘制一条线

- (void)drawRect:(CGRect)rect
{
//取得当前图形的上下文
CGContextRef context = UIGraphicsGetCurrentContext();
//设置线宽
CGContextSetLineWidth(context, 2.0);
//颜色RGBA
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
CGFloat components[] = {0.0, 0.0, 1.0, 1.0};
CGColorRef color = CGColorCreate(colorspace, components);
CGContextSetStrokeColorWithColor(context, color);
//设置起点
CGContextMoveToPoint(context, 30, 30);
//终点
CGContextAddLineToPoint(context, 300, 400);
CGContextStrokePath(context);
CGColorSpaceRelease(colorspace);
CGColorRelease(color);
}



在上面的例子中,我们通过colorspace创建颜色,在这里我们也可以使用UIColor,如下:

- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2.0);
CGContextSetStrokeColorWithColor(context, [UIColor
blueColor].CGColor);
CGContextMoveToPoint(context, 30, 30);
CGContextAddLineToPoint(context, 300, 400);
CGContextStrokePath(context);
}


绘制路径

- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2.0);
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
CGContextMoveToPoint(context, 100, 100);
CGContextAddLineToPoint(context, 150, 150);
CGContextAddLineToPoint(context, 100, 200);
CGContextAddLineToPoint(context, 50, 150);
CGContextAddLineToPoint(context, 100, 100);
CGContextStrokePath(context);
}




绘制矩形

- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2.0);
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
CGRect rectangle = CGRectMake(60, 170, 200, 80);
CGContextAddRect(context, rectangle);
CGContextStrokePath(context);
}



绘制椭圆或者圆

- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2.0);
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
CGRect rectangle = CGRectMake(60, 170, 200, 80);
CGContextAddEllipseInRect(context, rectangle);
CGContextStrokePath(context);
}




用颜色来填充一个路径

矩形和椭圆形的路径可以使用CGContextFillRect 和 CGContextFillEllipse() 来填充。相似的,一个path,可以使用CGContextFillPath()来填充,在填充之前,使用CGContextSetFillColorWithColor(),来指定填充颜色。

- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextMoveToPoint(context, 100, 100);
CGContextAddLineToPoint(context, 150, 150);
CGContextAddLineToPoint(context, 100, 200);
CGContextAddLineToPoint(context, 50, 150);
CGContextAddLineToPoint(context, 100, 100);
//设置填充路径
CGContextSetFillColorWithColor(context, [UIColor orangeColor].CGColor);
//填充
CGContextFillPath(context);
}



下面的代码,展示了带有蓝色边框的矩形并且用橙色填充这个矩形

- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
//蓝色边框
CGContextSetLineWidth(context, 4.0);
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
CGRect rectangle = CGRectMake(60, 170, 200, 80);
CGContextAddRect(context, rectangle);
CGContextStrokePath(context);
//填充
CGContextSetFillColorWithColor(context, [UIColor orangeColor].CGColor);
CGContextFillRect(context, rectangle);
}




绘制圆弧

使用CGContextAddArcToPoint() 函数,指定两个切线点和半径

- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 4.0);
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
CGContextMoveToPoint(context, 100, 100);
//(100, 100)-(100, 200) 和 (100, 200) -(300, 200)两条切线
CGContextAddArcToPoint(context, 100, 200, 300, 200, 100);
CGContextStrokePath(context);
}




绘制立方贝塞尔曲线

通过CGContextAddCurveToPoint() 函数,指定开始点,两个控制点,和一个结束点,来绘制

- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 4.0);
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
CGContextMoveToPoint(context, 10, 10);
//(0, 50)(300, 250)两个控制点和(300, 400)结束点
CGContextAddCurveToPoint(context, 0, 100, 300, 250, 300, 400);
CGContextStrokePath(context);
}



绘制二次方贝塞尔曲线

使用CGContextAddQuadCurveToPoint() 函数,带一个控制点和一个结束点做为参数。

- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 4.0);
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
CGContextMoveToPoint(context, 10, 200);
//(150, 10) 控制点 (300, 200) 结束点
CGContextAddQuadCurveToPoint(context, 150, 10, 300, 200);
CGContextStrokePath(context);
}




绘制虚线

关于dash的详细说明参考此处:http://blog.csdn.net/zhangao0086/article/details/7234859

- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 20.0);
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
CGFloat dashArray[] = {2, 6, 4, 2};
CGContextSetLineDash(context, 3, dashArray, 4);
CGContextMoveToPoint(context, 10, 200);
CGContextAddQuadCurveToPoint(context, 150, 10, 300, 200);
CGContextStrokePath(context);
}




绘制阴影

CGContextSetShadow 和 CGContextSetShadowWithColor

- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGSize myShadowOffset = CGSizeMake(-10, 15);
CGContextSaveGState(context);
//5 表示 模糊阴影效果
CGContextSetShadow(context, myShadowOffset, 5);
CGContextSetLineWidth(context, 4.0);
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
CGRect rectangle = CGRectMake(60, 170, 200, 80);
CGContextAddEllipseInRect(context, rectangle);
CGContextStrokePath(context);
CGContextRestoreGState(context);
}




使用CGContextSetShadowWithColor来设置阴影颜色

- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGSize myShadowOffset = CGSizeMake(-10, 15);
CGContextSaveGState(context);
CGContextSetShadowWithColor(context, myShadowOffset, 5, [UIColor redColor].CGColor);
CGContextSetLineWidth(context, 4.0);
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
CGRect rectangle = CGRectMake(60, 170, 200, 80);
CGContextAddEllipseInRect(context, rectangle);
CGContextStrokePath(context);
CGContextRestoreGState(context);
}




绘制渐变

Core Graphics 的 CGGradient 提供了线性、径向和轴向渐变。

- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGGradientRef gradient;
CGColorSpaceRef colorspace;
//渐变位置(0.0到1.0之间)
//例如要三种渐变,写成CGFloat locations[3] = { 0.0, 0.33, 0.66}
CGFloat locations[4] = { 0.0, 0.25, 0.5, 0.75 };
//渐变颜色
NSArray *colors = @[(id)[UIColor redColor].CGColor,
(id)[UIColor greenColor].CGColor,
(id)[UIColor blueColor].CGColor,
(id)[UIColor yellowColor].CGColor];
colorspace = CGColorSpaceCreateDeviceRGB();
gradient = CGGradientCreateWithColors(colorspace,
(CFArrayRef)colors, locations);
//开始点和结束点(可以调整先看不同的效果)
CGPoint startPoint, endPoint;
startPoint.x = 0.0;
startPoint.y = 0.0;
endPoint.x = 320;
endPoint.y = 480;

CGContextDrawLinearGradient(context, gradient,
startPoint, endPoint, 0);
}




径向渐变涉及绘制两个圆之间的渐变。当界圆的位置是分开的并且给定的不同尺寸,则会显示如下的圆锥形效果:



- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGGradientRef gradient;
CGColorSpaceRef colorspace;
CGFloat locations[3] = { 0.0, 0.5, 1.0 };

NSArray *colors = @[(id)[UIColor redColor].CGColor,
(id)[UIColor greenColor].CGColor,
(id)[UIColor cyanColor].CGColor];

colorspace = CGColorSpaceCreateDeviceRGB();

gradient = CGGradientCreateWithColors(colorspace,
(CFArrayRef)colors, locations);

CGPoint startPoint, endPoint;
CGFloat startRadius, endRadius;

startPoint.x = 100;
startPoint.y = 100;
endPoint.x = 200;
endPoint.y = 200;
startRadius = 10;
endRadius = 75;

CGContextDrawRadialGradient(context, gradient, startPoint,
startRadius, endPoint, endRadius, 0);
}




在Graphic Context中绘制Image

下面的例子,在点(0,0)绘制图片4.jpg

- (void)drawRect:(CGRect)rect
{
UIImage *myImage = [UIImage imageNamed:@"4.jpg"];
CGPoint imagePoint = CGPointMake(0, 0);
[myImage drawAtPoint:imagePoint];
}



发现只是显示了图片的一部分

如下例子,在一个区域内绘制

- (void)drawRect:(CGRect)rect
{
UIImage *myImage = [UIImage imageNamed:@"4.jpg"];
CGRect imageRect =[[UIScreen mainScreen] bounds];
[myImage drawInRect:imageRect];
}

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息