Core Graphics小白级Mark

来源：互联网发布：fedora和ubuntu哪个好编辑：程序博客网时间：2024/05/21 21:59

其实，对与这一部分知识，我在工作中很少使用。但是，为了系统的了解一下，把知识点扩展一下。我还是决定做这一步分知识的一个mark！

仅仅是最简单的小Demo！

开始吃豆豆吧！！！！

1.画一条折线，根据相应的参数

- (void)drawRect:(CGRect)rect

{

[self drawRooftopAtTopPointof:CGPointMake(160.0f, 40.0f) textToDisplay:@"Miter"

lineJoin:kCGLineJoinMiter];

[self drawRooftopAtTopPointof:CGPointMake(160.0f, 180.0f) textToDisplay:@"Bevel"

lineJoin:kCGLineJoinBevel];

[self drawRooftopAtTopPointof:CGPointMake(160.0f, 320.0f) textToDisplay:@"Round"

lineJoin:kCGLineJoinRound];

}

- (void) drawRooftopAtTopPointof:(CGPoint)paramTopPoint textToDisplay:(NSString*)paramText lineJoin:(CGLineJoin)paramLineJoin{

// 设置颜色

[[UIColor brownColor] set];

// 得到当前绘画上下文

CGContextRef currentContext = UIGraphicsGetCurrentContext();

// 设置接合点，点的类型

CGContextSetLineJoin(currentContext, paramLineJoin);

// 设置线的宽度

CGContextSetLineWidth(currentContext,20.0f);

// 移动开始坐标

CGContextMoveToPoint(currentContext, paramTopPoint.x - 140, paramTopPoint.y +100);

// 指定路径至指定的坐标

CGContextAddLineToPoint(currentContext,paramTopPoint.x, paramTopPoint.y);

// 指定路径至指定的坐标

CGContextAddLineToPoint(currentContext,paramTopPoint.x + 140, paramTopPoint.y +100);

// 画线

CGContextStrokePath(currentContext);

}

2.使用CGMutablePathRef画线

// 创建路径

CGMutablePathRef path = CGPathCreateMutable();

CGRect screenBounds = [[UIScreen mainScreen] bounds];

// 指定坐标

CGPathMoveToPoint(path, NULL, screenBounds.origin.x,screenBounds.origin.y);

// 指定路径至指定的坐标

CGPathAddLineToPoint(path,NULL, screenBounds.size.width, screenBounds.size.height);

// 指定坐标

CGPathMoveToPoint(path,NULL,screenBounds.size.width, screenBounds.origin.y);

// 指定路径至指定的坐标

CGPathAddLineToPoint(path,NULL, screenBounds.origin.x, screenBounds.size.height);

// 得到当前绘画上下文

CGContextRef currentContext = UIGraphicsGetCurrentContext();

// 添加路径到绘画上下文

CGContextAddPath(currentContext,path);

// 指定绘画颜色

[[UIColor blueColor] setStroke];

// 绘画

CGContextDrawPath(currentContext, kCGPathStroke);

// 释放路径

CGPathRelease(path);

3.画矩形-CGPathAddRect

// 创建路径

CGMutablePathRef path = CGPathCreateMutable();

// 设置长方形的边框

CGRect rectangle = CGRectMake(10.0f,10.0f, 200.0f, 300.0f);

// 将长方形的边框，添加到路径

CGPathAddRect(path,NULL,rectangle);

// 得到当前绘画上下文

CGContextRef currentContext = UIGraphicsGetCurrentContext();

// 添加路径到绘画上下文

CGContextAddPath(currentContext, path);

// 设置填充颜色

[[UIColor colorWithRed:0.20f green:0.60f blue:0.80f alpha:1.0f] setFill];

// 设置绘画颜色

[[UIColor brownColor] setStroke];

// 设置绘画宽度

CGContextSetLineWidth(currentContext,5.0f);

// 绘画

CGContextDrawPath(currentContext, kCGPathFillStroke);

// 释放路径

CGPathRelease(path);

4.画多个长方形-CGPathAddRects

// 创建路径

CGMutablePathRef path = CGPathCreateMutable();

// 画多个长方形时，将数组传入该方法

CGRect rectangle1 = CGRectMake(10.0f,10.0f, 200.0f, 300.0f);

CGRect rectangle2 = CGRectMake(40.0f,100.0f, 90.0f,300.0f);

CGRect rectangles[2] = {rectangle1, rectangle2 };

// 画多个长方形时，将数组传入该方法

CGPathAddRects(path, NULL,(const CGRect *)&rectangles, 2);

// 得到当前绘画上下文

CGContextRef currentContext = UIGraphicsGetCurrentContext();

// 添加路径到绘画上下文

CGContextAddPath(currentContext, path);

// 设置填充颜色

[[UIColor colorWithRed:0.20f green:0.60f blue:0.80f alpha:1.0f] setFill];

// 设置绘画颜色

[[UIColor brownColor] setStroke];

// 设置绘画宽度

CGContextSetLineWidth(currentContext,5.0f);

// 绘画

CGContextDrawPath(currentContext, kCGPathFillStroke);

// 释放路径

CGPathRelease(path);

5.为长方形设置阴影效果

- (void) drawRectAtTopOfScreen{

// 得到当前绘画上下文

CGContextRef currentContext = UIGraphicsGetCurrentContext();

// 绘画前，保存绘画上下文状态

CGContextSaveGState(currentContext);

// 设置阴影

CGContextSetShadowWithColor(currentContext,CGSizeMake(10.0f, 10.0f), 30.0f,[[UIColor grayColor] CGColor]);

// 创建路径

CGMutablePathRef path = CGPathCreateMutable();

// 矩形边框

CGRect firstRect = CGRectMake(55.0f, 60.0f,150.0f, 150.0f);

// 将矩形加入到路径

CGPathAddRect(path,NULL, firstRect);

// 添加路径到绘画上下文

CGContextAddPath(currentContext, path);

// 设置填充颜色

[[UIColor colorWithRed:0.20f green:0.60f blue:0.80f alpha:1.0f] setFill];

// 绘画

CGContextDrawPath(currentContext, kCGPathFill);

// 释放路径

CGPathRelease(path);

// 恢复我们保存的绘画状态

CGContextRestoreGState(currentContext);

}

解释：

CGContextSetShadowWithColor 方法：

参数分别为：绘画上下文，偏移量（右，下），模糊度（值越大越模糊），阴影颜色。

在这里，有一个很有趣的现象，就是，我们绘制后，我们用于绘图的状态，会被保存下来。当我们。这时候，我们需要使用CGContextSaveGState方法，先将我们绘画时的状态保存下来。然后，我们在绘画中可以设置颜色、阴影等参数。等我们使用完成，我们用CGContextRestoreGState方法来恢复我们保存的绘画状态。

也就是上面代码标红的地方！！！

6.绘制轴形渐变颜色

直接贴代码：

- (void)drawRect:(CGRect)rect

{

// 得到当前绘画上下文

CGContextRef currentContext = UIGraphicsGetCurrentContext();

// 绘画前，保存绘画上下文状态

CGContextSaveGState(currentContext);

// 获取一个设备相关的颜色空间

CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

// 定义开始颜色

UIColor *startColor = [UIColor orangeColor];

// 获得颜色成分

CGFloat *startColorComponents =(CGFloat *)CGColorGetComponents([startColor CGColor]);

UIColor *endColor = [UIColor blueColor];

CGFloat *endColorComponents =(CGFloat *)CGColorGetComponents([endColor CGColor]);

CGFloat colorComponents[8] = {

startColorComponents[0],

startColorComponents[1],

startColorComponents[2],

startColorComponents[3],

endColorComponents[0],

endColorComponents[1],

endColorComponents[2],

endColorComponents[3],

};

CGFloat colorIndices[2] = {0.0f, 1.0f};

// 创建一个渐变

CGGradientRef gradient = CGGradientCreateWithColorComponents (colorSpace,(const CGFloat*)&colorComponents, (const CGFloat *)&colorIndices,2);

// 释放颜色空间（使retain减1）

CGColorSpaceRelease(colorSpace);

CGPoint startPoint, endPoint;

startPoint = CGPointMake(120,260);

endPoint = CGPointMake(200.0f, 260);

// 绘制指定的渐变填充

// CGContextDrawLinearGradient (currentContext, gradient,startPoint,endPoint, kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);

CGContextDrawLinearGradient (currentContext, gradient,startPoint,endPoint,0);

CGGradientRelease(gradient);

CGContextRestoreGState(currentContext);

}

解释：

CGGradientCreateWithColorComponents 方法

创建一个渐变，根据提供的颜色成分

CGGradientRef CGGradientCreateWithColorComponents(

CGColorSpaceRef space,

const CGFloat components[],

const CGFloat locations[],

size_t count

);

space：颜色空间对象

components：定义渐变（gradient）的每一种颜色的颜色成分。一般包括R,G,B,和透明度；如果为RGB颜色空间，那么只包括R,G,B，而没有透明度。

如果，我们使用的颜色空间是一个RGBA颜色空间，并且我们想使用2种颜色的渐变（一个颜色用于开始位置，一个用于结束位置）。那么，我们需要提供8个颜色成分。分别为开始位置的RGBA，和结束位置的RGBA。

locations：每一种颜色颜色成分的位置。位置的范围为0-1之间。

count：提供的位置数量。

CGColorSpaceGetNumberOfComponents 方法

得到指定的颜色空间中所包含的颜色成分的数量

size_t CGColorSpaceGetNumberOfComponents(CGColorSpaceRef cs);

cs：被检测的颜色空间对象

CGColorSpaceRelease 方法

释放指定的颜色空间，也就是将指定的颜色空间的retain减1，使用该方法，不会报错，即使指定的颜色空间为NULL。

void CGColorSpaceRelease(CGColorSpaceRef cs);

cs：要释放的颜色空间

CGContextDrawLinearGradient 方法

void CGContextDrawLinearGradient(

CGContextRef context,

CGGradientRef gradient,

CGPoint startPoint,

CGPoint endPoint,

CGGradientDrawingOptions options

);

context：绘画上下文

gradient：指定的渐变对象

startPoint：设置绘制渐变的开始坐标

endPoint：设置绘制渐变的结束坐标

options：一个表示，指示是否绘制渐变的范围超出开始坐标，结束坐标；如果传入0，那么绘制将不会超出范围。

7.利用CGAffineTransform放射变换矩阵来画一个简单的矩形

- (void)drawRect:(CGRect)rect

{

// 创建路径

CGMutablePathRef path = CGPathCreateMutable();

// 定义要绘制的矩形边框

CGRect rectangle = CGRectMake(0.0f,0.0f,200.0f, 300.0f);

// 创建一个变换矩阵，分别代表向x，y轴的偏移量

CGAffineTransform transform = CGAffineTransformMakeTranslation(100.0f, 100.0f);

// 将矩形加入到路径

CGPathAddRect(path,&transform, rectangle);

// 得到当前绘画上下文

CGContextRef currentContext = UIGraphicsGetCurrentContext();

// 绘画前，保存绘画上下文状态

CGContextSaveGState(currentContext);

// 添加路径到绘画上下文

CGContextAddPath(currentContext,path);

// 设置填充颜色

[[UIColor colorWithRed:0.20f green:0.60f blue:0.80f alpha:1.0f] setFill];

// 指定绘画颜色

[[UIColor brownColor] setStroke];

// 设置线的宽度

CGContextSetLineWidth(currentContext,5.0f);

// 绘画

CGContextDrawPath(currentContext,kCGPathFillStroke);

// 释放路径

CGPathRelease(path);

// 恢复我们保存的绘画状态

CGContextRestoreGState(currentContext);

// 释放绘画上下文

CGContextRelease(currentContext);

}

8.利用CGContextTranslateCTM来指定变化位移来画一个简单的矩形

这个方法跟 7 达到的效果是一样的。只不过区别在于：

CGPathAddRect方法是直接在路径上的形状应用变换。

CGAffineTransform transform = CGAffineTransformMakeTranslation(100.0f, 100.0f);

CGPathAddRect(path,&transform, rectangle);

CGContextTranslateCTM方法是，在绘画上下文中应用坐标的变换。

CGContextTranslateCTM(currentContext, 100.0f,200.0f);

贴：

- (void)drawRect:(CGRect)rect

{

// 创建路径

CGMutablePathRef path = CGPathCreateMutable();

// 定义要绘制的矩形边框

CGRect rectangle = CGRectMake(10.0f,10.0f, 200.0f, 300.0f);

// 将矩形加入到路径

CGPathAddRect(path,NULL, rectangle);

// 得到当前绘画上下文

CGContextRef currentContext = UIGraphicsGetCurrentContext();

// 绘画前，保存绘画上下文状态

CGContextSaveGState(currentContext);

// 在指定的绘画上下文中改变原始坐标系统

CGContextTranslateCTM(currentContext, 100.0f,200.0f);

// 添加路径到绘画上下文

CGContextAddPath(currentContext, path);

// 设置填充颜色

[[UIColor colorWithRed:0.20f green:0.60f blue:0.80f alpha:1.0f] setFill];

// 指定绘画颜色

[[UIColor brownColor] setStroke];

// 设置线的宽度

CGContextSetLineWidth(currentContext,5.0f);

// 绘画

CGContextDrawPath(currentContext, kCGPathFillStroke);

// 释放路径

CGPathRelease(path);

// 恢复我们保存的绘画状态

CGContextRestoreGState(currentContext);

// 释放绘画上下文

CGContextRelease(currentContext);

}

CGContextTranslateCTM 方法

void CGContextTranslateCTM (CGContextRef c,CGFloat tx,CGFloat ty);

在指定的绘画上下文中改变原始坐标轴

c：绘画上下文

tx：x轴偏移量

ty：y轴偏移量

9.利用CGAffineTransformMakeScale放射变换矩阵来进行缩放

- (void)drawRect:(CGRect)rect

{

// 创建路径

CGMutablePathRef path = CGPathCreateMutable();

// 定义要绘制的矩形边框

CGRect rectangle = CGRectMake(0.0f,0.0f,200.0f, 300.0f);

// 返回一个放射变换，根据指定的缩放值

CGAffineTransform transform =CGAffineTransformMakeScale(0.5f, 0.5f);

// 将矩形加入到路径

CGPathAddRect(path,&transform, rectangle);

// 得到当前绘画上下文

CGContextRef currentContext = UIGraphicsGetCurrentContext();

// 绘画前，保存绘画上下文状态

CGContextSaveGState(currentContext);

// 添加路径到绘画上下文

CGContextAddPath(currentContext,path);

// 设置填充颜色

[[UIColor colorWithRed:0.20f green:0.60f blue:0.80f alpha:1.0f] setFill];

// 指定绘画颜色

[[UIColor brownColor] setStroke];

// 设置线的宽度

CGContextSetLineWidth(currentContext,5.0f);

// 绘画

CGContextDrawPath(currentContext,kCGPathFillStroke);

// 释放路径

CGPathRelease(path);

// 恢复我们保存的绘画状态

CGContextRestoreGState(currentContext);

// 释放绘画上下文

CGContextRelease(currentContext);

}

解释：

CGAffineTransformMakeScale 方法

返回一个放射变换，根据指定的缩放值

sx：x轴的缩放值

sy：y轴的缩放值

10.利用CGAffineTransformMakeRotation放射变换矩阵来进行旋转

// 返回一个旋转的放射变换，根据指定的弧度值

CGAffineTransform transform = CGAffineTransformMakeRotation((45.0f * M_PI) / 180.0f);

11.利用CGContextRotateCTM放射变换矩阵来进行旋转

// 在绘画上下文中指定旋转

CGContextRotateCTM(currentContext, (45.0f * M_PI) / 180.0f);

好像明白了一些！

有两类变换：

1.CGContentXXXCTM：是针对当前绘画上下文的。这样的话，整个绘画上下文都会相应的变换。

2.CGAffineTransformMakeXXXX：是针对当前绘画路劲的。这样的话，只是指定的路劲会相应变换。

纯小白级别的mark！

希望对你有所帮助！

转自sina某博客……链接弄丢了，对不住！

废了九牛二虎之力终于找到原文链接了！

http://blog.sina.com.cn/s/blog_7b9d64af0101coep.html