免费开源的iOS开发学习平台

绘图CoreGraphics:3-绘图方法和步骤

当我们希望对视图的外观进行重新绘制时,我们都需要在drawRect:方法中进行,绘图的过程可以按照固定的步骤进行。

drawRect:方法的调用时机

drawRect:方法是UIView类定义中的方法,视图每次需要进行自身重新绘制时都会调用该方法,所以如果在drawRect:方法中插入绘图代码,那么这段绘图代码就会起效,从而对视图进行重绘。

drawRect:方法主要在如下几个情形下会被调用。

  • 当视图第一次显示到屏幕之前;
  • 当调用视图的setNeedDisplay或者setNeedDisplayInRect:方法,通知重新绘图时。
  • 调用sizeToFit方法后,会调用drawRect:方法。

常见的绘图步骤

当在drawRect:方法中进行绘图时,一般会遵循如下的步骤进行:

  • 获得图形上下文(取得画布),需要调用UIGraphicsGetCurrentContext()函数;
  • 设置路径(绘图),通常使用贝塞尔路径;
  • 设置绘图上下文的属性与状态,如是否填充,填充颜色等等;
  • 添加路径到上下文,调用CGContextAddPath()函数;
  • 渲染上下文,调用CGContextStrokePath()函数,输出绘图图像到屏幕。

绘图示例

下面的代码中,绘制了一个封闭的三角形,该三角形边线的颜色是红色,线宽是3px,填充颜色是黄色。

  • 创建一个MYView类,继承自UIView

  • 在MYView.m文件中,重写其drawRect:方法

- (void)drawRect:(CGRect)rect {
    //1、获取绘图上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    //2、设置绘图路径
    //2.1 创建路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    //2.2 创建起始点
    CGPoint startPoint = CGPointMake(5, 5);
    CGPoint secondPoint = CGPointMake(50, 95);
    CGPoint thirdPoint = CGPointMake(95, 5);
    //2.3 画线
    [path moveToPoint:startPoint];
    [path addLineToPoint:secondPoint];
    [path addLineToPoint:thirdPoint];
    [path closePath];
    //2.4 设置线的属性
    [[UIColor redColor] setStroke];
    //2.5 设置填充颜色
    [[UIColor yellowColor] setFill];
    [path fill];
    
    //3、设置边线的宽度
    CGContextSetLineWidth(context, 3.0);
    
    //4、添加路径到上下文
    CGContextAddPath(context, path.CGPath);
    
    //5、渲染上下文
    CGContextStrokePath(context);
    
}

在控制器中,我们创建一个MYView类型的对象,并且添加到控制器view上,运行后显示如下,我们可以得到预期的形状。

示例代码

https://github.com/99ios/14.1.3