Core Graphics小白级Mark


其实,对与这一部分知识,我在工作中很少使用。但是,为了系统的了解一下,把知识点扩展一下。我还是决定做这一步分知识的一个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 mainScreenbounds];

    // 指定坐标

    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.0f200.0f300.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.0f200.0f300.0f);

    CGRect rectangle2 = CGRectMake(40.0f,100.0f90.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.0f10.0f), 30.0f,[[UIColor grayColor] CGColor]);

    // 创建路径

    CGMutablePathRef path = CGPathCreateMutable();

    // 矩形边框

    CGRect firstRect = CGRectMake(55.0f60.0f,150.0f150.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.0f1.0f};

    

    // 创建一个渐变

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

    

    // 释放颜色空间(使retain1

    CGColorSpaceRelease(colorSpace);

    

    CGPoint startPoint, endPoint;

    startPoint = CGPointMake(120,260);

    endPoint = CGPointMake(200.0f260);

    

    // 绘制指定的渐变填充

//    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.0f300.0f);

    // 创建一个变换矩阵,分别代表向xy轴的偏移量

    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.0f200.0f300.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:绘画上下文

txx轴偏移量

tyy轴偏移量


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


 

- (void)drawRect:(CGRect)rect

{

    // 创建路径

    CGMutablePathRef path = CGPathCreateMutable();

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

    CGRect rectangle = CGRectMake(0.0f,0.0f,200.0f300.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轴的缩放值

syy轴的缩放值


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


 

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

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


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

 


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

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

 

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


好像明白了一些!

有两类变换:


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


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



纯小白级别的mark!


希望对你有所帮助!

转自sina某博客……链接弄丢了,对不住!


废了九牛二虎之力终于找到原文链接了!
http://blog.sina.com.cn/s/blog_7b9d64af0101coep.html

你可能感兴趣的:(Core Graphics小白级Mark)