iOS7 使用Core Graphics 和 Core Image
2014-06-06 16:33
162 查看
绘制一条线
在上面的例子中,我们通过colorspace创建颜色,在这里我们也可以使用UIColor,如下:
绘制路径
绘制矩形
绘制椭圆或者圆
用颜色来填充一个路径
矩形和椭圆形的路径可以使用CGContextFillRect 和 CGContextFillEllipse() 来填充。相似的,一个path,可以使用CGContextFillPath()来填充,在填充之前,使用CGContextSetFillColorWithColor(),来指定填充颜色。
下面的代码,展示了带有蓝色边框的矩形并且用橙色填充这个矩形
绘制圆弧
使用CGContextAddArcToPoint() 函数,指定两个切线点和半径
绘制立方贝塞尔曲线
通过CGContextAddCurveToPoint() 函数,指定开始点,两个控制点,和一个结束点,来绘制
绘制二次方贝塞尔曲线
使用CGContextAddQuadCurveToPoint() 函数,带一个控制点和一个结束点做为参数。
绘制虚线
关于dash的详细说明参考此处:http://blog.csdn.net/zhangao0086/article/details/7234859
绘制阴影
CGContextSetShadow 和 CGContextSetShadowWithColor
使用CGContextSetShadowWithColor来设置阴影颜色
绘制渐变
Core Graphics 的 CGGradient 提供了线性、径向和轴向渐变。
径向渐变涉及绘制两个圆之间的渐变。当界圆的位置是分开的并且给定的不同尺寸,则会显示如下的圆锥形效果:
在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];
}
- (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];
}
相关文章推荐
- iphone 使用Core Graphics 剪贴图片
- iOS开发的2D绘制--CoreGraphics的简单使用二(画图形)
- iOS底层绘图机制,CoreGraphics框架,和Context使用详解
- iOS底层绘图机制,CoreGraphics框架,和Context使用详解
- iOS底层绘图机制,CoreGraphics框架,和Context使用详解
- iphone 使用Core Graphics 合成图片
- iOS底层绘图机制,CoreGraphics框架,和Context使用详解
- iOS底层绘图机制,CoreGraphics框架,和Context使用详解
- iOS之CoreGraphics使用(1)
- iOS底层绘图机制,CoreGraphics框架,和Context使用详解
- iOS开发的2D绘制--CoreGraphics的简单使用三(画文字和图片)
- 使用CoreGraphics中的函数画线条
- IOS7--javascriptcore中jscontext使用要注意的一点
- iOS底层绘图机制,CoreGraphics框架,和Context使用详解
- 使用CoreGraphics绘制一个简单的折线图,可自定义坐标。
- iOS开发的2D绘制--CoreGraphics的简单使用一(画线条)
- iOS开发之Core Graphics相关方法的简单使用
- 使用Core Graphics绘画一个山寨微信icon
- iOS底层绘图机制,CoreGraphics框架,和Context使用详解
- iOS底层绘图机制,CoreGraphics框架,和Context使用详解