美文网首页iOS
基本图形的绘制(Quartz2D)

基本图形的绘制(Quartz2D)

作者: iOS_成才录 | 来源:发表于2015-11-12 19:24 被阅读212次

    自定义 LineView

    #import <UIKit/UIKit.h>
    @interface LineView : UIView
    
    @end
    
    #import "LineView.h"
    
    @implementation LineView
    
    // Only override drawRect: if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    
    // 什么时候调用:当前控件即将显示的时候才会调用这个方法绘制
    // 作用:绘制内容,以后只要想在一个view中绘制内容,必须在drawRect里面绘制
    - (void)drawRect:(CGRect)rect {
        // 绘制曲线
        // 1.获取上下文
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        
        // 2.拼接路径
        UIBezierPath *path = [UIBezierPath bezierPath];
        
        // 设置起点
        [path moveToPoint:CGPointMake(10, 125)];
        
        // 描述曲线
        [path addQuadCurveToPoint:CGPointMake(240, 125) controlPoint:CGPointMake(125, 240)];
        
        [path addLineToPoint:CGPointMake(10, 125)];
        
        // 3.添加路径到上下文
        CGContextAddPath(ctx, path.CGPath);
        
        // 设置绘图状态,一定要再渲染之前
        // 设置颜色
        [[UIColor redColor] setStroke];
        
        // 设置线段的宽度
        CGContextSetLineWidth(ctx, 15);
        // 设置线段的顶角样式
        CGContextSetLineCap(ctx, kCGLineCapRound);
        
        // 设置连接样式
        CGContextSetLineJoin(ctx, kCGLineJoinRound);
        
        // 4.渲染上下文
        CGContextStrokePath(ctx);
    }
    
    // 绘制两条路径的方法
    - (void)drawTwoLine
    {
        // 1.获取上下文
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        
        // 2.拼接路径,一个路径中可以保存多条线段
        UIBezierPath *path = [UIBezierPath bezierPath];
        
        [path moveToPoint:CGPointMake(10, 10)];
        
        [path addLineToPoint:CGPointMake(20, 20)];
        
        // 3.把路径添加到上下文
        CGContextAddPath(ctx, path.CGPath);
        
        // 一根线对应一个路径,只要绘制的线不连接,最好使用一根线对应一个路径的方法
        path = [UIBezierPath bezierPath];
        // 拼接另一根直线
        // 默认下一根线的起点就是上一根线的终点
        // 设置第二根线的起点
        //    [path moveToPoint:CGPointMake(20, 20)];
        // 如果想要绘制不连接的线,重新设置起点
        [path moveToPoint:CGPointMake(50, 50)];
        
        [path addLineToPoint:CGPointMake(20, 200)];
        
        // 3.把路径添加到上下文
        CGContextAddPath(ctx, path.CGPath);
        
        // 4.渲染上下文
        CGContextStrokePath(ctx);
    }
    
    - (void)drawLine
    {
        // 1.获取跟当前View相关联的layer上下文(画板)
        // 总结:目前获取的所有上下文都是以UIGraphics开头
        // CGContextRef:上下文类型
        // CG:CoreGraphics Ref:引用
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        
        // 2.绘制内容,拼接路径
        // 创建贝瑟尔路径,因为里面已经封装好了很多路径
        UIBezierPath *path = [UIBezierPath bezierPath];
        // 绘制一条直线
        // 设置起点
        [path moveToPoint:CGPointMake(50, 50)];
        // 添加一根线到某个点
        [path addLineToPoint:CGPointMake(200, 200)];
        
        // 3.把拼接好的路径添加到上下文(画板)
        // UIBezierPath -> CGPath,直接.CGPath
        CGContextAddPath(ctx, path.CGPath);
        
        // 4.渲染上下文,就把内容显示到view
        // 只要跟上下文有关系的东西,都以CGContext开头
        CGContextStrokePath(ctx);
    }
    @end
    

    自定义ShapeView

    #import <UIKit/UIKit.h>
    @interface ShapeView : UIView
    
    @end
    
    #import "ShapeView.h"
    
    @implementation ShapeView
    
    // xib加载完成的时候调用
    - (void)awakeFromNib
    {
        NSLog(@"%s",__func__);
    }
    
    // Only override drawRect: if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    // 只有在drawRect中才能获取到跟view相关联的上下文
    - (void)drawRect:(CGRect)rect {
        // Drawing code
        // 1.获取上下文
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        
        // 2.拼接路径
        CGPoint center = CGPointMake(self.bounds.size.width * 0.5, self.bounds.size.height * 0.5);
        // 画扇形
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:100 startAngle:0 endAngle:M_PI_2 clockwise:YES];
        
        [path addLineToPoint:center];
        
        [path closePath];
        
        // 3.把路径添加到上下文
        CGContextAddPath(ctx, path.CGPath);
        
        // 设置绘图的状态
        [[UIColor redColor] setFill];
        
        [[UIColor greenColor] setStroke];
        
        CGContextSetLineWidth(ctx, 5);
        
        // 4.渲染上下文
        CGContextDrawPath(ctx, kCGPathFillStroke);
    }
    
    - (void)pathDraw
    {
        // 画圆弧
        // Center圆心
        // radius:半径
        // startAngle起始角度
        // endAngle:结束角度
        // clockwise:Yes 顺时针 No逆时针
        CGPoint center = CGPointMake(self.bounds.size.width * 0.5, self.bounds.size.height * 0.5);
        //    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:100 startAngle:0 endAngle:M_PI_2 clockwise:NO];
    
        //    [path stroke];
    
        // 画扇形
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:100 startAngle:0 endAngle:M_PI_2 clockwise:YES];
        
        [path addLineToPoint:center];
        
        //    [path addLineToPoint:CGPointMake(self.bounds.size.height * 0.5 + 100, self.bounds.size.height * 0.5)];
        // 关闭路径:从路径的终点连接到起点
        //    [path closePath];
        // 设置填充颜色
        [[UIColor redColor] setFill];
        
        // 设置描边颜色
        [[UIColor greenColor] setStroke];
        
        //    [path stroke];
        // 如果路径不是封闭的,默认会关闭路径
        [path fill];
    }
    
    - (void)drawShape
    {
        //    // 创建路径
        //    UIBezierPath *path = [UIBezierPath bezierPath];
        //
        //    // 拼接路径
        //    [path moveToPoint:CGPointMake(50, 50)];
        //
        //    [path addLineToPoint:CGPointMake(200, 200)];
    
        //    // 画线
        //    [path stroke];
        
        // 描述一个矩形
        //   UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 200, 200) cornerRadius:100];
        //    [path stroke];
        
        UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 10, 200, 100)];
        
        [path stroke];
    }
    @end
    

    相关文章

      网友评论

        本文标题:基本图形的绘制(Quartz2D)

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