Quartz2D 绘图

作者: Young_Blood | 来源:发表于2016-03-29 10:05 被阅读53次

    画线

    - (void)drawRect:(CGRect)rect {
        // Drawing code
        UIBezierPath *path = [UIBezierPath bezierPath];
        [path moveToPoint:CGPointMake(100, 100)];
        [path addLineToPoint:CGPointMake(100, 130)];
        [path stroke];
    }
    

    连接处样式

    /* Line join styles. */
    
    typedef CF_ENUM(int32_t, CGLineJoin) {
        kCGLineJoinMiter,
        kCGLineJoinRound,
        kCGLineJoinBevel
    };
    

    顶角样式

    /* Line cap styles. */
    
    typedef CF_ENUM(int32_t, CGLineCap) {
        kCGLineCapButt,
        kCGLineCapRound,
        kCGLineCapSquare
    };
    

    画扇型

    // Only override drawRect: if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    - (void)drawRect:(CGRect)rect {
        // Drawing code
        
        // 圆角矩形
    //   UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, 200, 200) cornerRadius:100];
        
        
        // 圆弧
        // Center:圆心
        // startAngle:弧度
        // clockwise:YES:顺时针 NO:逆时针
        
        // 扇形
        CGPoint center = CGPointMake(125, 125);
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:100 startAngle:0 endAngle:M_PI_2 clockwise:YES];
        
        // 添加一根线到圆心
        [path addLineToPoint:center];
        
        // 封闭路径,关闭路径:从路径的终点到起点
    //    [path closePath];
        
        
    //    [path stroke];
        
        // 填充:必须是一个完整的封闭路径,默认就会自动关闭路径
        [path fill];
    
    }
    

    重绘

    // 重绘,系统会先创建与view相关联的上下文,然后再调用drawRect
        [self setNeedsDisplay];
    

    下载的进度条制作

    // 注意:drawRect不能手动调用,因为图形上下文我们自己创建不了,只能由系统帮我们创建,并且传递给我们
    - (void)drawRect:(CGRect)rect {
        // Drawing code
        
        // 创建贝瑟尔路径
        CGFloat radius = rect.size.width * 0.5;
        CGPoint center = CGPointMake(radius, radius);
        CGFloat endA = -M_PI_2 + _progress * M_PI * 2;
        
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius - 2 startAngle:-M_PI_2 endAngle:endA clockwise:YES];
        
        [path stroke];
        
    }
    

    画饼图

    - (void)drawRect:(CGRect)rect 
    {
        CGFloat radius = self.bounds.size.width * 0.5;
        CGPoint center = CGPointMake(radius, radius);
        
        
        CGFloat startA = 0;
        CGFloat angle = 0;
        CGFloat endA = 0;
    
        
        // 第一个扇形
        angle = 25 / 100.0 * M_PI * 2;
        endA = startA + angle;
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
        
        // 添加一根线到圆心
        [path addLineToPoint:center];
        
        // 描边和填充通用
        [[UIColor redColor] set];
        
        [path fill];
        
        // 第二个扇形
        startA = endA;
        angle = 25 / 100.0 * M_PI * 2;
        endA = startA + angle;
        UIBezierPath *path1 = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
        
        // 添加一根线到圆心
        [path1 addLineToPoint:center];
        
        // 描边和填充通用
        [[UIColor greenColor] set];
        
        [path1 fill];
        
        // 第二个扇形
        startA = endA;
        angle = 50 / 100.0 * M_PI * 2;
        endA = startA + angle;
        UIBezierPath *path2 = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
        
        // 添加一根线到圆心
        [path2 addLineToPoint:center];
        
        // 描边和填充通用
        [[UIColor blueColor] set];
        
        [path2 fill];
    
    }
    

    绘制文字

    - (void)drawRect:(CGRect)rect {
        // 绘制文字
        
        NSString *str = @"asfdsfsdfasfdsfsdfasfdsfsdfasfdsfsdfasfdsfsdfasfdsfsdfasfdsfsdfasfdsfsdfasfdsfsdfasfdsfsdfasfdsfsdfasfdsfsdfasfdsfsdf";
        // 不会换行
        //[str drawAtPoint:CGPointZero withAttributes:nil];
        
        [str drawInRect:self.bounds withAttributes:nil];
    
    }
    

    绘制图片

    - (void)drawRect:(CGRect)rect {
        // Drawing code
        
        static CGFloat _snowY = 0;
    
        // 超出裁剪区域的内容全部裁剪掉
        // 注意:裁剪必须放在绘制之前
        UIRectClip(CGRectMake(0, 0, 50, 50));
        
        UIImage *image = [UIImage imageNamed:@"001"];
        
        // 默认绘制的内容尺寸跟图片尺寸一样大
    //    [image drawAtPoint:CGPointZero];
        
    //    [image drawInRect:rect];
        // 绘图平铺
        [image drawAsPatternInRect:rect];
        
    }
    

    绘制雪花

    // Only override drawRect: if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    - (void)drawRect:(CGRect)rect {
        
        // 如果以后想绘制东西到view上面,必须在drawRect方法里面,不管有没有手动获取到上下文
        // 修改雪花y值
        UIImage *image =  [UIImage imageNamed:@"雪花"];
        
        [image drawAtPoint:CGPointMake(50, _snowY)];
        
        _snowY += 10;
        
        if (_snowY > rect.size.height) {
            _snowY = 0;
        }
    
    }
    
    // 如果在绘图的时候需要用到定时器,通常CADisplayLink
    // NSTimer很少用于绘图,因为调度优先级比较低,并不会准时调用
    - (void)awakeFromNib
    {
        // 创建定时器
    //    [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(timeChange) userInfo:nil repeats:YES];
        CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(timeChange)];
        
        // 添加主运行循环
        [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
    }
    
    // CADisplayLink:每次屏幕刷新的时候就会调用,屏幕一般一秒刷新60次
    // 1秒 2次
    - (void)timeChange
    {
        // 注意:这个方法并不会马上调用drawRect,其实这个方法只是给当前控件添加刷新的标记,等下一次屏幕刷新的时候才会调用drawRect
        [self setNeedsDisplay];
        
    }
    
    

    图形上下文栈

    // 如果以后用贝瑟尔绘制图形【path stroke】,上下文的状态由贝瑟尔路径状态
    // Only override drawRect: if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    - (void)drawRect:(CGRect)rect {
        // Drawing code
        
        // 1.获取上下文
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        
    #pragma mark - 第一根
       // 2.描述路径
        // 第一根
        UIBezierPath *path = [UIBezierPath bezierPath];
        
        [path moveToPoint:CGPointMake(10, 125)];
        
        [path addLineToPoint:CGPointMake(240, 125)];
        
        // 把路径添加到上下文
        // .CGPath 可以UIkit的路径转换成CoreGraphics路径
        CGContextAddPath(ctx, path.CGPath);
        
        // 设置上下文状态
        CGContextSetLineWidth(ctx, 10);
        
        [[UIColor redColor] set];
        
    #pragma ---------- 
        
        // 保存一份上下文的状态
        CGContextSaveGState(ctx);
        
    #pragma ---------
        
        // 设置上下文状态
        CGContextSetLineWidth(ctx, 5);
        
        [[UIColor yellowColor] set];
        
        // 渲染上下文
        CGContextStrokePath(ctx);
        
        
        
    #pragma mark - 第二根
        // 2.描述路径
        // 第二根
        path = [UIBezierPath bezierPath];
        
        [path moveToPoint:CGPointMake(125, 10)];
        
        [path addLineToPoint:CGPointMake(125, 240)];
        
        // 把路径添加到上下文
        // .CGPath 可以UIkit的路径转换成CoreGraphics路径
        CGContextAddPath(ctx, path.CGPath);
        
        // 还原上一次保存的上下文状态
        CGContextRestoreGState(ctx);
        
        // 渲染上下文
        CGContextStrokePath(ctx);
        
    }
    

    平移旋转等矩阵操作

    // Only override drawRect: if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    - (void)drawRect:(CGRect)rect {
        
        // 1.获取上下文
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        
        // 2.描述路径
       UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(-100, -50, 200, 100)];
        
        [[UIColor redColor] set];
        
        // 上下文矩阵操作
        // 注意:矩阵操作必须要在添加路径之前
        
        //  平移
        CGContextTranslateCTM(ctx, 100, 50);
        
        // 缩放
        CGContextScaleCTM(ctx, 0.5, 0.5);
        
        // 旋转
        CGContextRotateCTM(ctx, M_PI_4);
        
        
        
        // 3.把路径添加上下文
        CGContextAddPath(ctx, path.CGPath);
        
        #pragma 此后的平移缩放旋转操作无效 但是颜色设置有效
        //  平移
        CGContextTranslateCTM(ctx, 300, 200);
        
        // 缩放
        CGContextScaleCTM(ctx, 2, 2);
        
        // 旋转
        CGContextRotateCTM(ctx, M_PI);
        
        
        [[UIColor blueColor] set];
        
        
        // 4.渲染上下文
        CGContextFillPath(ctx);
        
    }
    
    
    

    相关文章

      网友评论

        本文标题:Quartz2D 绘图

        本文链接:https://www.haomeiwen.com/subject/hnejlttx.html