代码改变世界

Quarz2D iOS 绘图

2016-01-17 15:41  000aaa  阅读(207)  评论(0编辑  收藏  举报

iOS  绘图的四部步曲

1.获取图形上下文在UIView的 drawRect:方法中才能取得跟view相关联的图形上下文,所以图形的绘制过程中的操作都得加载这个方法中

在调用UIView的 setNeedDisplay 方法的时候,会自动的触发drawRect 方法!

 

2.绘制图形

绘制的图形包括直线、虚线、二次曲线 、椭圆(圆是特殊的椭圆) 、圆弧  以及有线组成的图形(三角形、矩形等等)!

3.设置图形中元素的属性

图形的属性 ---- 例如:线的属性1.颜色 2.宽度(线条的粗细)3.线条两端的形状(圆角、方形)4.多条线形成的封闭图形的填充颜色等等 

4.渲染出效果

提交绘制好得图形,让它在view中展示出来

 

 

下面来贴一下代码:

1.绘制一条直线

 

//获取图形路径上下文
    CGContextRef ctf = UIGraphicsGetCurrentContext();
    //保存一份最初的图形上下文
    CGContextSaveGState(ctf);
    //第一条线
    CGContextMoveToPoint(ctf, 20, 100);//起点
    CGContextAddLineToPoint(ctf, 120, 80);//终点
    
    
    //设置线条的属性
    
    //1.设置线条的宽度
    CGContextSetLineWidth(ctf, 12);
    //2.设置线条颜色
    [[UIColor redColor] set];
    /* CGContextSetStrokeColorWithColor(ctf, [UIColor grayColor].CGColor); */
    //3.设置线条两端的的样式
    CGContextSetLineCap(ctf,kCGLineCapRound);
    
    //渲染
    CGContextStrokePath(ctf);
    
    //还原开始的时候保存的那份最纯洁的图形上下文
    CGContextRestoreGState(ctf);

 

2.绘制一条虚线

 CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextBeginPath(context);
   
    //lengths的值{10,10}表示先绘制10个点,再跳过10个点,如此反复,
    CGFloat lengths[] = {10,10};
    /*
    //如果把lengths值改为{10, 20, 10},则表示先绘制10个点,跳过20个点,绘制10个点,跳过10个点,再绘制20个点,如此反复
    CGFloat lengths[] = {10, 20, 10};*/
    
    //绘制虚线用到的函数
    CGContextSetLineDash(context, 0, lengths,2);
    
    CGContextMoveToPoint(context, 10.0, 20.0);
    CGContextAddLineToPoint(context, 310.0,20.0);
    
    // 设置线条的属性
    CGContextSetLineWidth(context, 2.0);
    CGContextSetStrokeColorWithColor(context, [UIColor whiteColor].CGColor);
    
    CGContextStrokePath(context);
    CGContextClosePath(context);

3.绘制椭圆

//获取路径上下文
    CGContextRef ctf = UIGraphicsGetCurrentContext();
    
    
    //椭圆是通过内切矩形来实现的(圆是通过内切正方形来实现的)
    CGRect rectangle = CGRectMake(60,300,200,80);
    CGContextAddEllipseInRect(ctf, rectangle);
    
    
    //设置线条的属性
    CGContextSetLineWidth(ctf, 2.0); //线条的宽度
    CGContextSetStrokeColorWithColor(ctf, [UIColor blueColor].CGColor);  //线条的颜色
    /*
     
     //设置绘制的椭圆的填充颜色
     CGContextSetFillColorWithColor(context, [UIColor greenColor].CGColor);
     CGContextFillEllipseInRect(context, rectangle);
     
     */
    //将会出的线渲染出来
    CGContextStrokePath(ctf);

4.绘制圆弧

//获取路径上下文
    CGContextRef ctf = UIGraphicsGetCurrentContext();
    
    /*
     param 2 、param3  做成圆心坐标
     param 4 半径
     param 5 开始绘图的角度
     param 6 结束绘图的角度
     param 7 绘图的方向 1.是顺时针方向  2.是逆时针方向
     坐标系是正右方向为x轴的正方向  正下方向为y轴的正方向
     */
    CGContextAddArc(ctf, 200/*圆心x坐标*/, 450/*圆心y坐标*/, 50/*半径*/, M_PI/6/*开始角度*/, M_PI_2/*结束角度*/, 1/*绘图方向*/);

    
    //设置线条的属性
    //颜色
    CGContextSetStrokeColorWithColor(ctf, [UIColor blueColor].CGColor);
     CGContextSetLineWidth(ctf, 2.0);//宽度
    
    
    
    //将会出的线渲染出来
    CGContextStrokePath(ctf);

5.绘制二次曲线

//获取路径上下文
    CGContextRef ctf = UIGraphicsGetCurrentContext();
    
    //二次曲线路径  起点坐标(10,200) 终点坐标(310,200)  确定曲线弧度点  【(80,10)不在曲线上】
    CGContextMoveToPoint(ctf, 10, 200);
    CGContextAddQuadCurveToPoint(ctf, 80, 10, 310, 200);
    
    //设置线条的属性
    CGContextSetLineWidth(ctf, 2.0);//宽度
    CGContextSetStrokeColorWithColor(ctf, [UIColor purpleColor].CGColor);//颜色
    //将会出的线渲染出来
    CGContextStrokePath(ctf);

 

6.绘制多条连续的直线(可以构成各种图形可以是封闭的也可以不封闭)

//获取路径上下文
    CGContextRef ctf = UIGraphicsGetCurrentContext();
    
    
    CGContextMoveToPoint(ctf, 100, 100);
    CGContextAddLineToPoint(ctf, 150, 100);
    CGContextAddLineToPoint(ctf, 150, 200);
    CGContextAddLineToPoint(ctf, 100, 200);
    CGContextAddLineToPoint(ctf, 100, 100);
    
    
    //为路径形成的图添加填充颜色  ---系统自动添加封闭路径连接形成一个封闭的可以填充的区域
    CGContextSetFillColorWithColor(ctf, [UIColor brownColor].CGColor);
    CGContextFillPath(ctf);
    
    //将会出的线渲染出来
    CGContextStrokePath(ctf);

或者(绘制一个矩形)

 //获取路径上下文
    CGContextRef ctf = UIGraphicsGetCurrentContext();
  
    CGRect rectangle = CGRectMake(60,20,200,200);//rect 性的参数 x y 宽 高
    CGContextAddRect(ctf, rectangle);
    
    //设置线条的属性1.2.3.4.5.
    CGContextSetStrokeColorWithColor(ctf, [UIColor orangeColor].CGColor);//线条的颜色--边框颜色
    
    //将会出的线渲染出来
    CGContextStrokePath(ctf);
    
    /*//设置画的矩形的填充颜色
    CGContextSetFillColorWithColor(ctf, [UIColor redColor].CGColor);
    CGContextFillRect(ctf, rectangle);*/

 

 

文章到这也就结束了,希望对路过的朋友有所帮助!!!