Core Graphics的绘制基本图形练习

937 阅读3分钟
    Core Graphics绘图代码一般都是写在.m文件中- (void)drawRect:(CGRect)rect;函数中
    思考一下这几个问题
        /*
     1.代码为什么要写在drawrect中
        在方法中可以获得正确的上下文
     2.rect参数的意义
         绘图的区域
     3.drawrect:是什么时候调用的
         1)drawRect 掉用是在Controller->loadView, Controller->viewDidLoad 两方法之后掉用的.
         2)通过设置contentMode属性值为UIViewContentModeRedraw。那么将在每次设置或更改frame的时候自动调用drawRect:
         3) 该方法在调用sizeToFit后被调用,所以可以先调用sizeToFit计算出size。然后系统自动调用drawRect:方法
         4)重绘的时候调用
     4.如何重绘
        1)调用某个需要重绘的 view 对象的 setNeedsDisplay
        2)调用某个需要重绘的 view 对象的 setNeedsDisplayInRect:(CGRect) rect:是需要重绘的地方
     5.为什么不能手动的调用drawrect
        手动调用可能获取不到正确的上下文
     */

一、Core Graphics绘图的步骤

1.获取上下文
2.创建路径、拼接路径、将路径添加到上下文中
3.渲染,就是将上下文中的路径显示出来
4.释放路径
具体可以参考C画直线,如果有想去可以去看看其他样例

二、一些基本的图形练习

1.C画直线

    //1.获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.拼接路径
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, **NULL**, 0, 0);
    CGPathAddLineToPoint(path, **NULL**, 50, 50);
    //3.把路径添加到上下文中
    CGContextAddPath(ctx, path);
    //4.渲染上下文
    CGContextStrokePath(ctx);
    //释放路径
//    CGPathRelease(path);
    CFRelease(path);//可以释放任何对象
    
 

    

2.OC画直线

     //创建路径对象
    UIBezierPath *path=[UIBezierPath bezierPath];
    //通过路径对象拼接路径
    [path moveToPoint:CGPointMake(0, 0)];
    [path addLineToPoint:CGPointMake(50, 50)];
    //渲染
    [path stroke];
    

3.矩形

    //oc形式创建矩形
    UIBezierPath *path= [UIBezierPath bezierPathWithRect:CGRectMake(100, 100, 100, 100)];
    [path stroke];
    //c形式创建矩形
    CGContextAddRect(ctx, CGRectMake(100, 100, 100, 100));

4.圆角矩形

UIBezierPath *path= [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 100, 100) cornerRadius:10];
[path stroke];
    

5.椭圆(Oval,Ellipse)

    //oc画椭圆,
    UIBezierPath *path= [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 100)];
    [path stroke];
    //c画椭圆
    CGContextRef ctx= UIGraphicsGetCurrentContext();
    CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, 200, 100));
    CGContextStrokePath(ctx);

6.圆(托过画弧线的方式)

     /*
     oc----画圆
     参数:圆心、半径、起始位置、结束位置、是否顺时针
     */
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(50, 50) radius:40.0 startAngle:0 endAngle:M_PI clockwise:**YES**];
    [path stroke];
    //c语言-----第二种方法画圆
    CGContextRef ctx = UIGraphicsGetCurrentContext(); //得到上下文
    CGContextAddArc(ctx, 70, 50, 50, 0, M_PI, 1); //上下文添加路径
    CGContextStrokePath(ctx);//渲染上下文

7.其他,设置线宽、线头样式,设置线段连接处的样式

    //oc----画粗线
    UIBezierPath *path1 = [[UIBezierPath alloc] init];//创建上下文并添加路径
    [path1 moveToPoint:CGPointMake(20, 20)];
    [path1 addLineToPoint:CGPointMake(100, 80)];
    [path1 addLineToPoint:CGPointMake(180, 20)];

    [path1 setLineWidth:10];//设置线宽
    [path1 setLineJoinStyle:kCGLineJoinRound];//设置连接处的样式
    [path1 setLineCapStyle:kCGLineCapRound];//设置头尾的样式
    
    
    

8.渲染的方式

    //c语言填充,不要忘了关闭路径
    //CGContextDrawPath(CGContextRef  ctx, CGPathDrawingMode mode); 用来渲染的方式,mo de类型请看下面的图形
    //1.获取当前上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.创建路径,拼接路径,并把路径添加到上下文
    CGContextMoveToPoint(ctx, 50, 50);
    CGContextAddLineToPoint(ctx, 100, 100);
    CGContextAddLineToPoint(ctx, 150, 50);
    CGContextClosePath(ctx);//关闭路径
    CGContextSetLineWidth(ctx, 10);//设置线宽
    [[UIColor redColor] setFill];//颜色
    [[UIColor blueColor] setStroke];//填充
    //3.渲染
    CGContextDrawPath(ctx, kCGPathFillStroke);

image.png

    //oc填充,不要忘了关闭路径
    UIBezierPath *path = [[UIBezierPath alloc] init];
    [path moveToPoint:CGPointMake(50, 50)];
    [path addLineToPoint:CGPointMake(100, 100)];
    [path addLineToPoint:CGPointMake(150, 50)];
    [path addLineToPoint:CGPointMake(50, 50)];
    [path closePath];
    
    [path setLineWidth:10];
    [[UIColor greenColor] setFill];
    [[UIColor blackColor] setStroke];

    [path stroke];
    [path fill];