iOS重绘机制drawRect 附：画图画线等code

最新推荐文章于 2016-06-14 14:16:11 发布

司文痞子

最新推荐文章于 2016-06-14 14:16:11 发布

阅读量3.5k

点赞数

分类专栏：代码笔记

代码笔记专栏收录该内容

62 篇文章 1 订阅

订阅专栏

iOS的绘图操作是在UIView类的drawRect方法中完成的，所以如果我们要想在一个UIView中绘图，需要写一个扩展UIView 的类，并重写drawRect方法，在这里进行绘图操作，程序会自动调用此方法进行绘图。
下面先说明一下绘图，比如，你想绘制一个方块，你需要写一个类来扩展UIView并在drawRect方法中填入如下代码：
- (void)drawRect:(CGRect)rect {
   // Drawing code.
   //获得处理的上下文
   CGContextRef context = UIGraphicsGetCurrentCont ext();
   //设置线条样式
   CGContextSetLineCap(context, kCGLineCapSquare);
   //设置线条粗细宽度
   CGContextSetLineWidth(context, 1.0);

   //设置颜色
   CGContextSetRGBStrokeCol or(context, 1.0, 0.0, 0.0, 1.0);
   //开始一个起始路径
   CGContextBeginPath(context);
   //起始点设置为(0,0):注意这是上下文对应区域中的相对坐标，
   CGContextMoveToPoint(context, 0, 0);
   //设置下一个坐标点
   CGContextAddLineToPoint(context, 100, 100);
   //设置下一个坐标点
   CGContextAddLineToPoint(context, 0, 150);
   //设置下一个坐标点
   CGContextAddLineToPoint(context, 50, 180);
   //连接上面定义的坐标点
   CGContextStrokePath(context);
}

再说明一下重绘，重绘操作仍然在drawRect方法中完成，但是苹果不建议直接调用drawRect方法，当然如果你强直直接调用此方法，当然是没有效果的。苹果要求我们调用UIView类中的setNeedsDisplay方法，则程序会自动调用drawRect方法进行重绘。（调用setNeedsDisplay会自动调用drawRect）
在UIView中,重写drawRect: (CGRect) aRect方法,可以自己定义想要画的图案.且此方法一般情况下只会画一次.也就是说这个drawRect方法一般情况下只会被掉用一次. 当某些情况下想要手动重画这个View,只需要掉用[self setNeedsDisplay]方法即可.

drawRect调是在Controller->loadView, Controller->viewDidLoad 两方法之后掉用的.所以不用担心在控制器中,这些View的drawRect就开始画了.这样可以在控制器中设置一些值给View(如果这些View draw的时候需要用到某些变量值).

1.如果在UIView初始化时没有设置rect大小，将直接导致drawRect不被自动调用。
2.该方法在调用sizeThatFits后被调用，所以可以先调用sizeToFit计算出size。然后系统自动调用drawRect:方法。
3.通过设置contentMode属性值为UIViewContentModeRedraw。那么将在每次设置或更改frame的时候自动调用drawRect:。
4.直接调用setNeedsDisplay，或者setNeedsDisplayInRect:触发drawRect:，但是有个前提条件是rect不能为0.
以上1,2推荐；而3,4不提倡
1、若使用UIView绘图，只能在drawRect：方法中获取相应的contextRef并绘图。如果在其他方法中获取将获取到一个invalidate的ref并且不能用于画图。drawRect：方法不能手动显示调用，必须通过调用setNeedsDisplay 或者 setNeedsDisplayInRect ，让系统自动调该方法。
2、若使用calayer绘图，只能在drawInContext: 中（类似鱼drawRect）绘制，或者在delegate中的相应方法绘制。同样也是调用setNeedDisplay等间接调用以上方法。

3、若要实时画图，不能使用gestureRecognizer，只能使用touchbegan等方法来掉用setNeedsDisplay实时刷新屏幕

样例代码：

- (void)drawRect:(CGRect)rect  
{  
    CGContextRef context = UIGraphicsGetCurrentContext();  
       
   
       
    /*NO.1画一条线 
       
     CGContextSetRGBStrokeColor(context, 0.5, 0.5, 0.5, 0.5);//线条颜色 
     CGContextMoveToPoint(context, 20, 20); 
     CGContextAddLineToPoint(context, 200,20); 
     CGContextStrokePath(context); 
    */  
   
       
       
    /*NO.2写文字 
       
    CGContextSetLineWidth(context, 1.0); 
    CGContextSetRGBFillColor (context, 0.5, 0.5, 0.5, 0.5); 
    UIFont  *font = [UIFont boldSystemFontOfSize:18.0]; 
    [@"公司：北京中软科技股份有限公司\n部门：ERP事业部\n姓名：McLiang" drawInRect:CGRectMake(20, 40, 280, 300) withFont:font]; 
    */  
   
       
    /*NO.3画一个正方形图形 没有边框 
  
    CGContextSetRGBFillColor(context, 0, 0.25, 0, 0.5); 
    CGContextFillRect(context, CGRectMake(2, 2, 270, 270)); 
    CGContextStrokePath(context); 
    */  
    
       
    /*NO.4画正方形边框 
      
    CGContextSetRGBStrokeColor(context, 0.5, 0.5, 0.5, 0.5);//线条颜色 
    CGContextSetLineWidth(context, 2.0); 
    CGContextAddRect(context, CGRectMake(2, 2, 270, 270)); 
    CGContextStrokePath(context); 
    */  
   
       
    /*NO.5画方形背景颜色 
       
    CGContextTranslateCTM(context, 0.0f, self.bounds.size.height); 
    CGContextScaleCTM(context, 1.0f, -1.0f); 
    UIGraphicsPushContext(context); 
    CGContextSetLineWidth(context,320); 
    CGContextSetRGBStrokeColor(context, 250.0/255, 250.0/255, 210.0/255, 1.0); 
    CGContextStrokeRect(context, CGRectMake(0, 0, 320, 460)); 
    UIGraphicsPopContext(); 
    */  
   
    /*NO.6椭圆 
       
     CGRect aRect= CGRectMake(80, 80, 160, 100); 
     CGContextSetRGBStrokeColor(context, 0.6, 0.9, 0, 1.0); 
     CGContextSetLineWidth(context, 3.0); 
     CGContextAddEllipseInRect(context, aRect); //椭圆 
     CGContextDrawPath(context, kCGPathStroke); 
    */  
   
    /*NO.7 
    CGContextBeginPath(context); 
    CGContextSetRGBStrokeColor(context, 0, 0, 1, 1); 
    CGContextMoveToPoint(context, 100, 100); 
    CGContextAddArcToPoint(context, 50, 100, 50, 150, 50); 
    CGContextStrokePath(context); 
    */  
   
    /*NO.8渐变 
    CGContextClip(context); 
    CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB(); 
    CGFloat colors[] = 
    { 
        204.0 / 255.0, 224.0 / 255.0, 244.0 / 255.0, 1.00, 
        29.0 / 255.0, 156.0 / 255.0, 215.0 / 255.0, 1.00, 
        0.0 / 255.0,  50.0 / 255.0, 126.0 / 255.0, 1.00, 
    }; 
    CGGradientRef gradient = CGGradientCreateWithColorComponents 
    (rgb, colors, NULL, sizeof(colors)/(sizeof(colors[0])*4)); 
    CGColorSpaceRelease(rgb); 
    CGContextDrawLinearGradient(context, gradient,CGPointMake 
                                (0.0,0.0) ,CGPointMake(0.0,self.frame.size.height), 
                                kCGGradientDrawsBeforeStartLocation); 
     */  
       
      
    /* NO.9四条线画一个正方形 
    //画线 
        UIColor *aColor = [UIColor colorWithRed:0 green:1.0 blue:0 alpha:0]; 
    CGContextSetRGBStrokeColor(context, 1.0, 0, 0, 1.0); 
       CGContextSetFillColorWithColor(context, aColor.CGColor); 
    CGContextSetLineWidth(context, 4.0); 
    CGPoint aPoints[5]; 
    aPoints[0] =CGPointMake(60, 60); 
    aPoints[1] =CGPointMake(260, 60); 
    aPoints[2] =CGPointMake(260, 300); 
    aPoints[3] =CGPointMake(60, 300); 
    aPoints[4] =CGPointMake(60, 60); 
    CGContextAddLines(context, aPoints, 5); 
    CGContextDrawPath(context, kCGPathStroke); //开始画线 
     */  
       
       
       
    /*  NO.10 
    UIColor *aColor = [UIColor colorWithRed:0 green:1.0 blue:0 alpha:0]; 
    CGContextSetRGBStrokeColor(context, 1.0, 0, 0, 1.0); 
    CGContextSetFillColorWithColor(context, aColor.CGColor); 
    //椭圆 
    CGRect aRect= CGRectMake(80, 80, 160, 100); 
    CGContextSetRGBStrokeColor(context, 0.6, 0.9, 0, 1.0); 
    CGContextSetLineWidth(context, 3.0); 
      CGContextSetFillColorWithColor(context, aColor.CGColor); 
       CGContextAddRect(context, rect); //矩形 
    CGContextAddEllipseInRect(context, aRect); //椭圆 
    CGContextDrawPath(context, kCGPathStroke); 
     */  
   
       
       
    /*  NO.11 
     画一个实心的圆 
   
     CGContextFillEllipseInRect(context, CGRectMake(95, 95, 100.0, 100)); 
    */  
       
       
       
    /*NO.12 
     画一个菱形 
    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); 
     */  
   
    /*NO.13 画矩形 
    CGContextSetLineWidth(context, 2.0); 
  
    CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor); 
  
    CGRect rectangle = CGRectMake(60,170,200,80); 
  
    CGContextAddRect(context, rectangle); 
      
    CGContextStrokePath(context); 
     */  
       
      
    /*椭圆 
    CGContextSetLineWidth(context, 2.0); 
  
    CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor); 
  
    CGRect rectangle = CGRectMake(60,170,200,80); 
  
    CGContextAddEllipseInRect(context, rectangle); 
      
    CGContextStrokePath(context); 
     */  
       
    /*用红色填充了一段路径: 
      
    CGContextMoveToPoint(context, 100, 100); 
    CGContextAddLineToPoint(context, 150, 150); 
    CGContextAddLineToPoint(context, 100, 200); 
    CGContextAddLineToPoint(context, 50, 150); 
    CGContextAddLineToPoint(context, 100, 100); 
    CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor); 
    CGContextFillPath(context); 
    */  
       
    /*填充一个蓝色边的红色矩形 
    CGContextSetLineWidth(context, 2.0); 
    CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor); 
    CGRect rectangle = CGRectMake(60,170,200,80); 
    CGContextAddRect(context, rectangle); 
    CGContextStrokePath(context); 
    CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor); 
    CGContextFillRect(context, rectangle); 
    */  
       
    /*画弧 
     //弧线的是通过指定两个切点，还有角度，调用CGContextAddArcToPoint()绘制 
    CGContextSetLineWidth(context, 2.0); 
    CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor); 
    CGContextMoveToPoint(context, 100, 100); 
    CGContextAddArcToPoint(context, 100,200, 300,200, 100); 
    CGContextStrokePath(context); 
    */  
      
       
    /* 
    绘制贝兹曲线 
    //贝兹曲线是通过移动一个起始点，然后通过两个控制点,还有一个中止点，调用CGContextAddCurveToPoint() 函数绘制 
    CGContextSetLineWidth(context, 2.0); 
  
    CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor); 
  
    CGContextMoveToPoint(context, 10, 10); 
  
    CGContextAddCurveToPoint(context, 0, 50, 300, 250, 300, 400); 
      
    CGContextStrokePath(context); 
     */  
       
    /*绘制二次贝兹曲线 
      
      CGContextSetLineWidth(context, 2.0); 
  
      CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor); 
  
      CGContextMoveToPoint(context, 10, 200); 
  
      CGContextAddQuadCurveToPoint(context, 150, 10, 300, 200); 
      
      CGContextStrokePath(context); 
     */  
       
    /*绘制虚线 
    CGContextSetLineWidth(context, 5.0); 
  
    CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor); 
  
    CGFloat dashArray[] = {2,6,4,2}; 
  
    CGContextSetLineDash(context, 3, dashArray, 4);//跳过3个再画虚线，所以刚开始有6-（3-2）=5个虚点 
      
    CGContextMoveToPoint(context, 10, 200); 
      
    CGContextAddQuadCurveToPoint(context, 150, 10, 300, 200); 
      
    CGContextStrokePath(context); 
    */  
/*绘制图片 
    NSString* imagePath = [[NSBundle mainBundle] pathForResource:@"dog" ofType:@"png"]; 
    UIImage* myImageObj = [[UIImage alloc] initWithContentsOfFile:imagePath]; 
    //[myImageObj drawAtPoint:CGPointMake(0, 0)]; 
    [myImageObj drawInRect:CGRectMake(0, 0, 320, 480)]; 
  
    NSString *s = @"我的小狗"; 
  
    [s drawAtPoint:CGPointMake(100, 0) withFont:[UIFont systemFontOfSize:34.0]]; 
*/  
       
  /* 
    NSString *path = [[NSBundle mainBundle] pathForResource:@"dog" ofType:@"png"]; 
    UIImage *img = [UIImage imageWithContentsOfFile:path]; 
    CGImageRef image = img.CGImage; 
    CGContextSaveGState(context); 
    CGRect touchRect = CGRectMake(0, 0, img.size.width, img.size.height); 
    CGContextDrawImage(context, touchRect, image); //
    CGContextRestoreGState(context); 
   */  
     
       
    /*NSString *path = [[NSBundle mainBundle] pathForResource:@"dog" ofType:@"png"]; 
    UIImage *img = [UIImage imageWithContentsOfFile:path]; 
    CGImageRef image = img.CGImage; 
    CGContextSaveGState(context); 
  
    CGContextRotateCTM(context, M_PI); 
    CGContextTranslateCTM(context, -img.size.width, -img.size.height); 
  
    CGRect touchRect = CGRectMake(0, 0, img.size.width, img.size.height); 
    CGContextDrawImage(context, touchRect, image); 
    CGContextRestoreGState(context);*/  
   
/* 
    NSString *path = [[NSBundle mainBundle] pathForResource:@"dog" ofType:@"png"]; 
    UIImage *img = [UIImage imageWithContentsOfFile:path]; 
    CGImageRef image = img.CGImage; 
      
    CGContextSaveGState(context); 
  
    CGAffineTransform myAffine = CGAffineTransformMakeRotation(M_PI); 
    myAffine = CGAffineTransformTranslate(myAffine, -img.size.width, -img.size.height); 
    CGContextConcatCTM(context, myAffine); 
  
    CGContextRotateCTM(context, M_PI); 
    CGContextTranslateCTM(context, -img.size.width, -img.size.height); 
  
    CGRect touchRect = CGRectMake(0, 0, img.size.width, img.size.height); 
    CGContextDrawImage(context, touchRect, image); 
    CGContextRestoreGState(context); 
*/  
}

注意：CGContextDrawImage画图图形相反镜像

Instead of

CGContextDrawImage(context, CGRectMake(0, 0, 145, 15), image.CGImage);

Use

[image drawInRect:CGRectMake(0, 0, 145, 15)

司文痞子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iOS重绘机制drawRect 附：画图画线等code

iOS的绘图操作是在UIView类的drawRect方法中完成的，所以如果我们要想在一个UIView中绘图，需要写一个扩展UIView 的类，并重写drawRect方法，在这里进行绘图操作，程序会自动调用此方法进行绘图。下面先说明一下绘图，比如，你想绘制一个方块，你需要写一个类来扩展UIView并在drawRect方法中填入如下代码：- (void)drawRect:(CGRect)rect {
复制链接

扫一扫