iOS开发之绘图(CoreGraphics)

iOS开发 2018-03-26 已阅 2125 次

绘图操作必须在 - (void)drawRect:(CGRect)rect 函数进行,即要重写父类的此方法。
本文绘图内容:

  • 线条/虚线
  • 长方形/正方形
  • 椭圆/圆
  • 三角形
  • 五角星

Objective-C 版本

- (void)drawRect:(CGRect)rect {
    
    // 获取绘图上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    if (!context) {
        
        NSLog(@"获取绘图context失败");
        return;
    }
    
    /** ==== 对context进行基本设置 */
    CGContextSetLineWidth(context, 2);  // 数值越大,绘出来的路径越大
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor); // 路径颜色
    CGContextSetLineCap(context, kCGLineCapRound);   // 路径起点/终点处显示风格
    CGContextSetLineJoin(context, kCGLineJoinRound); // 路径连接(拐弯)处显示风格

    // 画一条直线
    CGContextMoveToPoint(context, 50, 40);
    CGContextAddLineToPoint(context, 250, 40);
    CGContextStrokePath(context); // 输出到屏幕上
    
    // 画一个正方形/长方形,并输出到屏幕上
    CGContextStrokeRect(context, CGRectMake(50, 50, 100, 50));   // 长方形
    CGContextStrokeRect(context, CGRectMake(200, 50, 100, 100)); // 正方形
    
    // 画一个椭圆/圆形,并输出到屏幕上
    CGContextStrokeEllipseInRect(context, CGRectMake(50, 160, 100, 50)); // 椭圆
    CGContextStrokeEllipseInRect(context, CGRectMake(220, 160, 100, 100)); // 圆
    
    // 画一个三角形
    CGPoint points[4];
    points[0] = CGPointMake(40, 300);
    points[1] = CGPointMake(80, 220);
    points[2] = CGPointMake(120, 300);
    points[3] = CGPointMake(40, 300);
    
    CGContextAddLines(context, points, 4);
    CGContextStrokePath(context); // 输出到屏幕上
    
    // 画一条虚线
    CGFloat lengths[] = {5, 10};
    CGContextSetLineDash(context, 0, lengths, 2);
    CGContextMoveToPoint(context, 50, 320);
    CGContextAddLineToPoint(context, 250, 320);
    CGContextStrokePath(context); // 输出到屏幕上
    
    // 画个五角星(需要到圆、三角函数的知识,忘记数学知识的话,先去温习一下)
    CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
    CGPoint centerPoint=CGPointMake(160, 430);  // 确定中心点
    CGFloat radius=50.0;                        // 确定半径
    CGPoint point1=CGPointMake(centerPoint.x, centerPoint.y-radius); // 五角星到顶点
    CGContextMoveToPoint(context, point1.x, point1.y);
    
    //五角星每个点之间点夹角,采用弧度计算。每两个点进行连线就可以画出五角星
    //点与点之间点夹角为2*M_PI/5.0,
    CGFloat angle=4*M_PI/5.0;
    for (int i=1; i<=5; i++) {
        
        CGFloat x=centerPoint.x-sinf(i*angle)*radius;
        CGFloat y=centerPoint.y-cosf(i*angle)*radius;
        CGContextAddLineToPoint(context, x, y);
    }
    
    // 输出到屏幕上
    CGContextDrawPath(context, kCGPathFill);        // 只填充
    //CGContextDrawPath(context, kCGPathEOFill);    // 只填充(但闭合路径重叠的地方除外)
    //CGContextDrawPath(context, kCGPathStroke);    // 只显示路径
    //CGContextDrawPath(context, kCGPathFillStroke);// 填充并显示路径
    //CGContextDrawPath(context, kCGPathEOFillStroke);// 填充(但闭合路径重叠的地方除外)并显示路径
}

Swift 版本

comeing soon

效果图


本文由 Harvey 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论