IOS Quartz 2D 学习

作者: CharlyZheng | 来源:发表于2017-09-01 19:25 被阅读23次

Quartz 2D
Quartz 2D 绘图技术
Quartz 2D绘图（1）初识
IOS中使用Quartz 2D绘制虚线
Quartz2D简单介绍
Quartz2D?
iOS学习笔记(6):Quartz2D
Quartz2D
【Quartz2D】绘图引擎
iOS_使用Quartz2D引擎进行基本绘图

翻译自http://www.techotopia.com/index.php/An_iPhone_Graphics_Drawing_Tutorial_using_Quartz_2D

画矩形方框

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetRGBStrokeColor(context, 0.9, 0.1, 0.3, 1.0);//线条颜色
    CGContextSetLineWidth(context, 5.0);
    CGContextAddRect(context, CGRectMake(0, 0, width, height));
    CGContextStrokePath(context);

画圆角方框

    //An opaque type that represents a Quartz 2D drawing environment.
    //一个不透明类型的Quartz 2D绘画环境,相当于一个画布,你可以在上面任意绘画
    CGContextRef context = UIGraphicsGetCurrentContext();
    //路径轮廓的颜色
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);

    CGFloat radius = 20.0f; //圆角半径
    CGFloat width = 100;
    CGFloat height = 80;//画布宽高
    CGContextMoveToPoint(context, width, height-radius);  // 开始坐标右边开始
    CGContextAddArcToPoint(context, width, height, width-radius, height, radius);  // 右下角角度
    CGContextAddArcToPoint(context, 0, height, 0, height-radius, radius); // 左下角角度
    CGContextAddArcToPoint(context, 0, 0, radius, 0, radius); // 左上角
    CGContextAddArcToPoint(context, width, 0, width, radius, radius); // 右上角
    CGContextClosePath(context);
    CGContextDrawPath(context, kCGPathFillStroke); //根据坐标绘制路径

CGContextMoveToPoint(context, 150, 50); // 开始坐标右边开始
CGContextAddArcToPoint(context,100,80,130,150,20); //此刻画笔停留在圆弧末端（80，80）

是说从（150，50）到（100，80）画一条线，然后再从（100，80）到（130，150）画一条线，从这两条线（无限延伸的）和半径20可以确定一条弧

参考图

画圆形方框

    CGContextRef context = UIGraphicsGetCurrentContext();
    //路径轮廓的颜色
    CGContextSetStrokeColorWithColor(context, [UIColor whiteColor].CGColor);
    //填充色
    CGContextSetFillColorWithColor(context, [UIColor yellowColor].CGColor);
    //路径轮廓宽
    CGContextSetLineWidth(context, LINE_WIDTH);
    //暂时不懂
    CGRect insetRect = CGRectInset(rect, LINE_WIDTH/2, LINE_WIDTH/2);
    //开始画椭圆
    CGContextStrokeEllipseInRect(context, insetRect);

//填充圆，无边框

    //填充圆，无边框
    CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
    CGContextAddArc(context, rect.size.width/2, rect.size.height/2, rect.size.height/2-_boardInset, 0, 2*M_PI, 0); //添加一个圆
    CGContextDrawPath(context, kCGPathFill);//绘制填充

UIBezierPath 画直线圆弧组合

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

   
    CGFloat width = rect.size.width;
    CGFloat height = rect.size.height;
    CGFloat margin = 20;
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint: CGPointMake(0, margin)];                 //设置绘制起始点
    [path addLineToPoint:CGPointMake(width/2 - margin, margin)]; //尖角左坐标
    [path addLineToPoint:CGPointMake(width/2, 0)];  //尖角顶点坐标
    [path addLineToPoint:CGPointMake(width/2 + margin, margin)];//尖角右坐标
    [path addLineToPoint:CGPointMake(width, margin)];//右上角

    [path addLineToPoint:CGPointMake(width, height-margin)];//右侧直线边框
    
    
    /**
     二次贝塞尔曲线，曲线段在当前点开始，在指定的点结束，一个控制点的曲线定义。此种方法绘制的是近似圆，不是严格的1/4圆

     @param endPoint 结束点
     @param controlPoint 控制点
     */
    [path addQuadCurveToPoint:CGPointMake(width-margin, height) controlPoint:CGPointMake(width, height)];//右下角弧线
    [path addLineToPoint:CGPointMake(margin, height)];//底部直线边框
    [path addQuadCurveToPoint:CGPointMake(0, height-margin) controlPoint:CGPointMake(0, height)];//左下角弧线
    [path closePath]; //闭合路径

    // 4. 设置颜色, 并绘制路径
    [[UIColor redColor] set];
    [path fill];
 }