美文网首页
IOS Quartz 2D 学习

IOS Quartz 2D 学习

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

    翻译自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];
     }
    
    
    画直线圆弧组合

    https://blog.csdn.net/themagickeyjianan/article/details/54861945

    相关文章

      网友评论

          本文标题:IOS Quartz 2D 学习

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