iOS UIBezierPath 类绘图

UIBezierPath 类用来绘制直线或曲线，从而组成各种形状。

这里以 UIView 的一个子类 BNRHypnosisView 为例，重写 UIView 的 drawRect: 方法，并在该方法中实现绘图，示例代码如下：

- (void)drawRect:(CGRect)rect {
    CGRect bounds = self.bounds;
    
    // 根据 bounds 计算中心点
    CGPoint center;
    center.x = bounds.origin.x + bounds.size.width / 2.0;
    center.y = bounds.origin.y + bounds.size.height / 2.0;
    
    // 根据视图宽和高中的较小值计算圆形的半径
    float radius = (MIN(bounds.size.width, bounds.size.height) / 2.0);
    
    UIBezierPath *path = [[UIBezierPath alloc] init]; //创建一个对象
    
    // 以中心为原点，radius 为半径，定义一个 0 到 M_PI * 2.0 弧度的路径（整圆）
    [path addArcWithCenter:center
                    radius:radius
                startAngle:0.0
                  endAngle:M_PI * 2.0
                 clockwise:YES];

    path.lineWidth = 10; // 设置线条宽度为 10 点

    [[UIColor orangeColor] setStroke]; // 设置绘制颜色为橙色
    
    [path stroke]; // 绘制路径
}

注意：这些值得单位是点（points），不是像素（pixel）。若为像素，则视图在 Retina 和非 Retina 显示屏上的大小无法保持一致。

因为点的大小与设备分辨率相关，取决于屏幕以多少像素显示一个点：
在 Retina 显示屏上，一个点的宽高都是 2 个像素；
而在非 Retina 显示屏上，一个点的宽高都是 1 个像素。

运行代码，效果图如下：

透明背景的圆形

在 BNRHypnosisView.m 的 initWithFrame: 方法中，设置对象的背景色透明，示例代码：

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        // 设置 BNRHypnosisView 对象的背景颜色为透明
        self.backgroundColor = [UIColor clearColor];
    }
    return self;
}

• 绘制同心圆

两种方法：

1. 创建多个 UIBezierPath 对象，每个对象代表一个圆形；
2. 使用一个 UIBezierPath 对象，为每个圆定义一个绘制路径。

方法 2 更好：只创建一个对象，内存占用少。示例代码：

float maxRadius = hypot(bounds.size.width, bounds.size.height) / 2.0;

for (float currentRadius = maxRadius; currentRadius > 0; currentRadius -= 20) {
        [path addArcWithCenter:center
                        radius:currentRadius
                    startAngle:0.0
                      endAngle:M_PI * 2.0
                     clockwise:YES];
}

注：这里的 hypot 为数学函数（已知直角三角形的两直角边长度，求斜边长度）。关于其他常用数学函数，可参考 iOS math.h 常用数学函数

效果如下：

绘制了不正确的同心圆

可以发现多了一条直线，这是因为单个 UIBezierPath 对象将多个路径（每个路径可以画出一个圆形）链接起来，形成了一个完整的路径。可以将 对象想象成一支在纸上绘画的笔——绘制完某个圆后绘制另外一个，没有抬起笔，因此会留下笔迹。所以要抬起笔。

每次循环开始需要抬起画笔，添加代码如下：

[path moveToPoint:CGPointMake(center.x + currentRadius, center.y)]; //抬起画笔

添加后的效果：

绘制同心圆

• 绘制图像
  从文件系统中加载一个图像文件，并将其绘制到同心圆中，效果如图所示：

  
  
  

  绘制图像

从该文件创建一个 UIImage 对象，示例代码：

UIImage *logoImage = [UIImage imageNamed:@"logo"];

在 drawRect: 方法中将图像绘制到视图，示例代码：

[logoImage drawInRect:rect];

更多方法和属性可参阅官方文档。此外 UIBezierPath精讲 写得也不错！推荐下！

《iOS编程（第4版）》 笔记