iOS绘图

╰+攻爆jí腚メ 2023-10-17 12:45 7阅读 0赞

#### 介绍 ####

说到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]里有提到，使用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：方法获取上下文，好像是不会产生寄宿图的，内存也不会增加的那么夸张。[测试例子][Link 1]
    > 
    > 咨询了原文作者，他说其实在inContext：调用之前会创建一个合适大小的寄宿图，这个合适大小实际上是由系统控制的，它有一个依据是绘制内容，所以绘制内容越大内存也会越大的。还有layer的frame变大也会增大内存，然后layer的frame增大到某一个限度之后，frame再增大内存也不会增加了。所以整个增加的内存其实是受到多个方面的影响的，只是这个增加的内存不知道怎么算了？
    > 
    > 所以能不用drawRect：就尽量不用吧

--------------------

##### 源码，应用场景 #####

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

> 两个可以学习的源码：  
> [图表：BEMSimpleLineGraph][BEMSimpleLineGraph]  
> [绘画板：Brushes][Brushes]

##### 参考 #####

[iOS绘图教程][iOS]

原文链接

[点击打开链接][Link 3]

[drawRect]: http://bihongbo.com/2016/01/03/memoryGhostdrawRect/
[Link 1]: https://github.com/walkdianzi/BHBDrawBoarderDemo
[Link 2]: https://github.com/walkdianzi/DSCoreGraphics/tree/master
[BEMSimpleLineGraph]: https://github.com/Boris-Em/BEMSimpleLineGraph
[Brushes]: https://github.com/sprang/Brushes
[iOS]: http://www.cocoachina.com/industry/20140115/7703.html
[Link 3]: http://www.jianshu.com/p/72b386d755f5