iOS绘图

作者: 齐滇大圣 | 来源:发表于2016-02-25 19:39 被阅读10957次

    介绍###

    说到iOS的绘图肯定就是Core Graphics。

    Core Graphics Framework是一套基于C的API框架,使用了Quartz作为绘图引擎。它提供了低级别、轻量级、高保真度的2D渲染。该框架可以用于基于路径的绘图、变换、颜色管理、脱屏渲染,模板、渐变、遮蔽、图像数据管理、图像的创建、遮罩以及PDF文档的创建、显示和分析。

    获取图形上下文####

    Core Graphics API所有的操作都在一个上下文中进行。所以在绘图之前需要获取该上下文并传入执行渲染的函数中。如果你正在渲染一副在内存中的图片,此时就需要传入图片所属的上下文。获得一个图形上下文是我们完成绘图任务的第一步,你可以将图形上下文理解为一块画布。如果你没有得到这块画布,那么你就无法完成任何绘图操作。

     获取图形上下文的几种方式:
     1.drawRect:
     2.inContext:    (-(void)drawInContext:(CGContextRef)ctx   - (void)drawLayer:(CALayer*)layer inContext:(CGContextRef)ctx)
     3.UIGraphicsBeginImageContextWithOptions
    

     两大绘图框架:
     UIKit
     像UIImage、NSString(绘制文本)、UIBezierPath(绘制形状)、UIColor都知道如何绘制自己。
     这些类提供了功能有限但使用方便的方法来让我们完成绘图任务。一般情况下,UIKit就是我们所需要的。
     
     Core Graphics
     这是一个绘图专用的API族,它经常被称为QuartZ或QuartZ 2D。Core Graphics是iOS上所有绘图
     功能的基石,包括UIKit。
    

    6种绘图的形式####

    • 第一种UIKit框架drawRect:

      在UIView的子类方法drawRect:中绘制一个蓝色圆
      - (void) drawRect: (CGRect) rect {                   
      
          UIBezierPath* p = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,100,100)]; 
          [[UIColor blueColor] setFill]; 
          [p fill]; 
      } 
      
    • 第二种Core Graphics框架inContext:

      - (void)drawRect:(CGRect)rect{
          //当前上下文及画布为当前view
          CGContextRef con = UIGraphicsGetCurrentContext();
          CGContextAddEllipseInRect(con, CGRectMake(0,0,100,100));
          CGContextSetFillColorWithColor(con, [UIColor blueColor].CGColor);
          CGContextFillPath(con);
      }
      

    • 第三种UIKit框架inContext:

      drawInContext:方法
      
      @interface TestLayer : CALayer
      
      @end
      
      @implementation TestLayer
      
      - (void)drawInContext:(CGContextRef)ctx{
      
            UIGraphicsPushContext(ctx);
            UIBezierPath* p = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,100,100)];
            [[UIColor blueColor] setFill];
            [p fill];
            UIGraphicsPopContext();
      }
      
      @end
      
      @implementation XXXViewController{
      - (void)viewDidLoad{
      
            [super viewDidLoad];
      
            //1.创建自定义的layer
            TestLayer *layer=[TestLayer layer];
            //2.设置layer的属性
            layer.backgroundColor= [UIColor blackColor].CGColor;
            layer.frame=CGRectMake(100, 100, 200, 200);
      
            [layer setNeedsDisplay];
            //3.添加layer
            [self.view.layer addSublayer:layer];
      }
      @end
      
      
      drawLayer: inContext:方法
      
      @interface MyLayerDelegate : NSObject
      
      @end
      
      @implementation MyLayerDelegate
      
      - (void)drawLayer:(CALayer*)layer inContext:(CGContextRef)ctx {
      
            UIGraphicsPushContext(ctx);
            UIBezierPath* p = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,100,100)];
            [[UIColor blueColor] setFill];
            [p fill];
            UIGraphicsPopContext();
      }
      @end
      
      @implementation XXXViewController{
      
            MyLayerDelegate *_layerDeleagete;
            CALayer         *_layer;
      }
      
      - (void)viewDidLoad{
      
            [super viewDidLoad];
            _layerDeleagete = [[MyLayerDelegate alloc] init];
      
            //1.创建自定义的layer
            _layer=[CALayer layer];
            //2.设置layer的属性
            _layer.backgroundColor= [UIColor blackColor].CGColor;
            _layer.frame=CGRectMake(100, 100, 200, 200);
      
            _layer.delegate = _layerDeleagete;
            [_layer setNeedsDisplay];
      
            //3.添加layer
            [self.view.layer addSublayer:_layer];
      }
      
      - (void)dealloc{
            _layer.delegate = nil;
      }
      @end
      
    • 第四种Core Graphics框架inContext:

      drawInContext:方法
      - (void)drawInContext:(CGContextRef)ctx{
            CGContextAddEllipseInRect(ctx, CGRectMake(0,0,100,100));
            CGContextSetFillColorWithColor(ctx, [UIColor blueColor].CGColor);
            CGContextFillPath(ctx);
      }
      
      
      drawLayer: inContext:方法
      - (void)drawLayer:(CALayer*)layer inContext:(CGContextRef)ctx {     
      
            UIGraphicsPushContext(ctx); 
            UIBezierPath* p = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,100,100)];
            [[UIColor blueColor] setFill]; [p fill]; UIGraphicsPopContext(); 
      }
      

    • 第五种UIKit框架UIGraphicsBeginImageContextWithOptions

      @implementation XXXViewController
      
      - (void)viewDidLoad{
      
          [super viewDidLoad];                
          UIGraphicsBeginImageContextWithOptions(CGSizeMake(100,100), NO, 0);
          UIBezierPath* p = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,100,100)];
          [[UIColor blueColor] setFill];
          [p fill];
          UIImage* im = UIGraphicsGetImageFromCurrentImageContext();
          UIGraphicsEndImageContext();
      
          /*---------------------------------*/
          UIImageView  *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
          [imageView setImage:im];
          [self.view addSubview:imageView];
      }
      @end
      
    • 第六种Core Graphics框架UIGraphicsBeginImageContextWithOptions

      @implementation XXXViewController
      
      - (void)viewDidLoad{
      
          [super viewDidLoad];        
          UIGraphicsBeginImageContextWithOptions(CGSizeMake(100,100), NO, 0);
          CGContextRef con = UIGraphicsGetCurrentContext();    
          CGContextAddEllipseInRect(con, CGRectMake(0,0,100,100));
          CGContextSetFillColorWithColor(con, [UIColor blueColor].CGColor);    
          CGContextFillPath(con);    
          UIImage* im = UIGraphicsGetImageFromCurrentImageContext();    
          UIGraphicsEndImageContext();
      
          /*---------------------------------*/
          UIImageView  *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
          [imageView setImage:im];
          [self.view addSubview:imageView];
      }
      

    注意####

    • 使用- (void)drawRect:(CGRect)rect需要注意的地方

    以下方法调用drawRect

    1.如果在UIView初始化时没有设置rect大小,将直接导致drawRect不被自动调用。

    2.该方法在调用sizeThatFits后被调用,所以可以先调用sizeToFit计算出size。然后系统自动调用drawRect:方法。

    3.通过设置contentMode属性值为UIViewContentModeRedraw。那么将在每次设置或更改frame的时候自动调用drawRect:。

    4.直接调用setNeedsDisplay,或者setNeedsDisplayInRect:触发drawRect:,但是有个前提条件是rect不能为0.

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

    问题####

    1. 比如当在一个view上绘制一条线之类的,是直接用addsubView添加一个UIView控件好,还是在drawRect:里用绘图代码绘制一条线好?
      哪种更高效,或者一样?

    文章内存恶鬼drawRect里有提到,使用drawRect方法被调用,它就会为视图分配一个寄宿图,这个寄宿图的像素尺寸等于视图大小乘以contentsScale
    (这个属性与屏幕分辨率有关,我们的画板程序在不同模拟器下呈现的内存用量不同也是因为它)的值。
    比如在iphone6上UIView的frame为
    CGRectMake(0, 0, SCREEN_SIZE.width*5, SCREEN_SIZE.height*5)则内存增加为750*5*1334*5*4/1024/2024,相当于95.4M内存

    所以当使用drawRect:时,即使里面没写任何绘制代码,也会分配一个寄宿图,内存也会对应的增加。

    文中提到一旦你实现了CALayerDelegate协议中的-drawLayer:inContext:
    方法或者UIView中的-drawRect:方法(其实就是前者的包装方法),图层就创建了一个绘制上下文。内存也会暴增。

    但是使用我上面inContext:方法获取上下文,好像是不会产生寄宿图的,内存也不会增加的那么夸张。测试例子

    咨询了原文作者,他说其实在inContext:调用之前会创建一个合适大小的寄宿图,这个合适大小实际上是由系统控制的,它有一个依据是绘制内容,所以绘制内容越大内存也会越大的。还有layer的frame变大也会增大内存,然后layer的frame增大到某一个限度之后,frame再增大内存也不会增加了。所以整个增加的内存其实是受到多个方面的影响的,只是这个增加的内存不知道怎么算了?

    所以能不用drawRect:就尽量不用吧


    源码,应用场景####

    以上六种方式绘制圆的代码
    绘图代码比较常用就是图表绘画板这两种场景。

    两个可以学习的源码:
    图表:BEMSimpleLineGraph
    绘画板:Brushes

    参考####

    iOS绘图教程

    相关文章

      网友评论

      • 落影loyinglin:好熟悉的六种方式 在cocoa上看过
        齐滇大圣:@月光族人_落影 那放个链接啊,不然找不到:joy::joy:
        落影loyinglin:@齐滇大圣 嗯 我没仔细看,把后面的参加给忽略了。绘图的还有一篇文章,讲的的是如何把图像绘制到屏幕 ,更底层收获很大。你可以看看
        齐滇大圣:@月光族人_落影 对啊,我最后面那个参考链接就是它的就是自己整理了一下

      本文标题:iOS绘图

      本文链接:https://www.haomeiwen.com/subject/lyuvkttx.html