iOS 之路JC专题

iOS UIBezierPath 类绘图

2016-04-03  本文已影响734人  对歌当酒

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

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

- (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.minitWithFrame: 方法中,设置对象的背景色透明,示例代码:

- (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版)》 笔记

上一篇 下一篇

猜你喜欢

热点阅读