Quartz2d 画饼状图 图形上下文栈 矩阵操作 裁剪圆角图片

画饼状图

- (void)drawRect:(CGRect)rect {
    // Drawing code

    // 需求：根据sections的数据，绘制多个扇形

    // 1.获取上下文(Layer Graphics Context)
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // 2.根据sections的个数，计算扇形的起始和结束位置来画扇形
    NSInteger count = self.sections.count;

    // 如果没有数据，直接返回，不用画
    if(count == 0) return;

    // 圆心
    CGFloat centerX = rect.size.width * 0.5;
    CGFloat centerY = rect.size.height * 0.5;

    //半径就是x的中心点
    CGFloat radius = centerX;

    // 计算所有组的总数
    NSInteger sum = 0;
    for (NSInteger i = 0; i < count; i++) {
        sum += [self.sections[i] integerValue];
    }

    // 默认设置扇形的起始位置为 0
    CGFloat startAngle = 0;

    for (NSInteger i = 0; i < count; i++) {
        // 计算每组占用的比例
#warning 计算float的值，一要除以一个float类型值
        CGFloat scale = [self.sections[i] integerValue] / (sum * 1.0);

        // 指定颜色
        UIColor *sectionColor = self.sectionColors[i];
        [sectionColor set];

        // 计算结束的位置
#warning 计算结束的位置　＝　起始位置　＋　需要的画的弧度
        CGFloat endAngle = startAngle + scale * 2 * M_PI;

#warning 指定 "弧" 的中心点路径
        CGContextMoveToPoint(ctx, centerX, centerY);
        // 画弧
        CGContextAddArc(ctx, centerX, centerY, radius, startAngle, endAngle, 0);

        // 渲染
        CGContextFillPath(ctx);

        NSLog(@"scale:%f startAngle:%f endAngle:%f",scale, startAngle,endAngle);

        // 重新设置起始的位置，供一次循环使用
        startAngle = endAngle;

    }

}

图形上下文栈

- (void)drawRect:(CGRect)rect {
    // Drawing code

    // 需求： 先画一个矩形，颜色为红色，线宽为3
    //       再画一个矩形，颜色为黑色，线宽为默认

    // 上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // 保存一个当前上下文的绘图状态到一个栈里面
    // G代理Graphics[绘图]
    CGContextSaveGState(ctx);
//    CGContextSaveGState(ctx);

    // 画红色，线宽为3的矩形
    [[UIColor redColor] set];
    CGContextSetLineWidth(ctx, 3);
    CGContextAddRect(ctx, CGRectMake(10, 10, 100, 100));
    CGContextStrokePath(ctx);

    // 画黑色，线宽为默认的矩形
//    [[UIColor blackColor] set];
//    CGContextSetLineWidth(ctx, 1);

    // 恢复 当前上下文的状态
//    CGContextRestoreGState(ctx);

    CGContextAddRect(ctx, CGRectMake(10, 120, 50, 50));
    CGContextStrokePath(ctx);

    //再恢复
#warning 恢复状态不能随便调用，保存了多少次绘图状态，就可以调用多少
//    CGContextRestoreGState(ctx);

}

矩阵操作

- (void)drawRect:(CGRect)rect {
    // Drawing code
    //矩阵操作 平移、绽放，旋转

    // 画个三角形 + 画一条线

    CGContextRef ctx = UIGraphicsGetCurrentContext();

#warning qurtz2d的平移，要在绘制之前
    //平移
    //CGContextTranslateCTM(ctx, 0,50);

    //缩放
    //CGContextScaleCTM(ctx, 1.5, 1.5);

    //旋转
    // 负数 逆时针/ 正数 顺时针
    // 围绕左上角(0,0) 旋转
    CGContextRotateCTM(ctx, - M_PI * 0.25);

    // 定义三个点
    CGPoint points[3] = {{50,20},{100,80},{10,80}};
    CGContextAddLines(ctx, points, 3);

    // 合并三个点的路径
    CGContextClosePath(ctx);

    // 画线
    CGPoint linePoints[2] = {{10,20},{80,80}};
    CGContextAddLines(ctx, linePoints, 2);
    CGContextStrokePath(ctx);

    // 渲染
    CGContextStrokePath(ctx);
}

裁剪圆角图片

- (void)drawRect:(CGRect)rect {
    // Drawing code

    // 1.实现裁剪图片显圆形 并显示

    // 1.1.获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // 1.2.指定圆的路径，并圆外面多余的剪切掉[CGContextClip]
#warning CGContextClip方法要记住
    // 定义图片的Rect
    CGRect imageRect = CGRectMake(0, 0, rect.size.width, rect.size.height);
    CGContextAddEllipseInRect(ctx, imageRect);
    CGContextClip(ctx);

    // 1.3.就把图片显示在UIView
    UIImage *image = [UIImage imageNamed:self.imageName];
    [image drawInRect:imageRect];

    // 2.添加一个圆的边框
    //线宽
    CGContextSetLineWidth(ctx, self.borderWidth);

    //设置边框的颜色
    [self.borderColor set];

    CGContextAddEllipseInRect(ctx, imageRect);
    CGContextStrokePath(ctx);

}