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);
    
}