ios 基本图形的绘制

来源：互联网发布：深圳市信诚网络编辑：程序博客网时间：2024/05/17 07:10

转自：http://www.maxiaoguo.com/clothes/252.html

基本图形的绘制包括：代码画线，画文字图片裁剪重绘简单动画

当自定义view的时候系统会自动调用drawRect 方法

画线

- (void)drawRect:(CGRect)rect{    // Drawing code    // 1.获得图形上下文    CGContextRef ctx = UIGraphicsGetCurrentContext();        // 2.拼接图形(路径)    // 设置线段宽度    CGContextSetLineWidth(ctx, 10);        // 设置线段头尾部的样式    CGContextSetLineCap(ctx, kCGLineCapRound);        // 设置线段转折点的样式    CGContextSetLineJoin(ctx, kCGLineJoinRound);        /**  第1根线段  **/    // 设置颜色    CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);    // 设置一个起点    CGContextMoveToPoint(ctx, 10, 10);    // 添加一条线段到(100, 100)    CGContextAddLineToPoint(ctx, 100, 100);        // 渲染一次    CGContextStrokePath(ctx);            /**  第2根线段  **/    // 设置颜色    CGContextSetRGBStrokeColor(ctx, 0, 0, 1, 1);    // 设置一个起点    CGContextMoveToPoint(ctx, 200, 190);    // 添加一条线段到(150, 40)    CGContextAddLineToPoint(ctx, 150, 40);    CGContextAddLineToPoint(ctx, 120, 60);            // 3.渲染显示到view上面    CGContextStrokePath(ctx);}

画圆弧

/** *  画圆弧 */void drawArc(){    // 1.获得上下文    CGContextRef ctx = UIGraphicsGetCurrentContext();        // 2.画圆弧    // x\y : 圆心    // radius : 半径    // startAngle : 开始角度    // endAngle : 结束角度    // clockwise : 圆弧的伸展方向(0:顺时针, 1:逆时针)    CGContextAddArc(ctx, 100, 100, 50, M_PI_2, M_PI, 0);            // 3.显示所绘制的东西    CGContextFillPath(ctx);}

画圆

/** *  画圆 */void drawCircle(){    // 1.获得上下文    CGContextRef ctx = UIGraphicsGetCurrentContext();        // 2.画圆    CGContextAddEllipseInRect(ctx, CGRectMake(50, 10, 100, 100));        CGContextSetLineWidth(ctx, 10);        // 3.显示所绘制的东西    CGContextStrokePath(ctx);}

画矩形

/** *  画四边形 */void draw4Rect(){    // 1.获得上下文    CGContextRef ctx = UIGraphicsGetCurrentContext();        // 2.画矩形    CGContextAddRect(ctx, CGRectMake(10, 10, 150, 100));        // set : 同时设置为实心和空心颜色    // setStroke : 设置空心颜色    // setFill : 设置实心颜色    [[UIColor whiteColor] set];    //    CGContextSetRGBFillColor(ctx, 0, 0, 1, 1);        // 3.绘制图形    CGContextFillPath(ctx);}

画三角形

/** *  画三角形 */void drawTriangle(){    // 1.获得上下文    CGContextRef ctx = UIGraphicsGetCurrentContext();        // 2.画三角形    CGContextMoveToPoint(ctx, 0, 0);    CGContextAddLineToPoint(ctx, 100, 100);    CGContextAddLineToPoint(ctx, 150, 80);    // 关闭路径(连接起点和最后一个点)    CGContextClosePath(ctx);        //    CGContextSetRGBStrokeColor(ctx, 0, 1, 0, 1);        // 3.绘制图形    CGContextStrokePath(ctx);}

画文字

/** *  画文字 */void drawText(){    // 1.获得上下文    CGContextRef ctx = UIGraphicsGetCurrentContext();    // 2.画矩形    CGRect cubeRect = CGRectMake(50, 50, 100, 100);    CGContextAddRect(ctx, cubeRect);    // 3.显示所绘制的东西    CGContextFillPath(ctx);                // 4.画文字    NSString *str = @"哈哈哈哈Good morning hello hi hi hi hi";    //    [str drawAtPoint:CGPointZero withAttributes:nil];        NSMutableDictionary *attrs = [NSMutableDictionary dictionary];    // NSForegroundColorAttributeName : 文字颜色    // NSFontAttributeName : 字体    attrs[NSForegroundColorAttributeName] = [UIColor redColor];    attrs[NSFontAttributeName] = [UIFont systemFontOfSize:50];    [str drawInRect:cubeRect withAttributes:attrs];}

画图片

void drawImage(){    // 1.取得图片    UIImage *image = [UIImage imageNamed:@"me"];        // 2.画//    [image drawAtPoint:CGPointMake(50, 50)];//    [image drawInRect:CGRectMake(0, 0, 150, 150)];    [image drawAsPatternInRect:CGRectMake(0, 0, 200, 200)];        // 3.画文字    NSString *str = @"为xxx所画";    [str drawInRect:CGRectMake(0, 180, 100, 30) withAttributes:nil];}

在绘制的时候当设置了ctx 的颜色的时候再绘制其他的图时，颜色需要重置，很麻烦，解决方法是重置 ctx 如下

 // 将ctx拷贝一份放到栈中    CGContextSaveGState(ctx);        // 设置绘图状态    CGContextSetLineWidth(ctx, 10);    [[UIColor redColor] set];    CGContextSetLineCap(ctx, kCGLineCapRound);        // 第1根线    CGContextMoveToPoint(ctx, 50, 50);    CGContextAddLineToPoint(ctx, 120, 190);        CGContextStrokePath(ctx);        // 将栈顶的上下文出栈,替换当前的上下文    CGContextRestoreGState(ctx);

整个ctx 的旋转移动

    CGContextRotateCTM(ctx, M_PI_4 * 0.3);    CGContextScaleCTM(ctx, 0.5, 0.5);    CGContextTranslateCTM(ctx, 0, 150);

图片的裁剪思路是裁剪ctx的显示区域

- (void)drawRect:(CGRect)rect{    CGContextRef ctx = UIGraphicsGetCurrentContext();        CGContextSaveGState(ctx);        // 0.画圆    CGContextAddEllipseInRect(ctx, CGRectMake(100, 100, 50, 50));    // 裁剪    CGContextClip(ctx);    CGContextFillPath(ctx);        // 1.显示图片    UIImage *image = [UIImage imageNamed:@"me"];    [image drawAtPoint:CGPointMake(100, 100)];        CGContextRestoreGState(ctx);        CGContextAddRect(ctx, CGRectMake(0, 0, 50, 50));    CGContextFillPath(ctx);}

动画

CADisplayLink 是一个定时器，特点刷新频率高， setNeedsDisplay方法起重新绘制的作用

- (void)awakeFromNib{    CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(setNeedsDisplay)];    [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];    //    [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(setNeedsDisplay) userInfo:nil repeats:YES];}- (void)drawRect:(CGRect)rect{    self.snowY+=5;        if (self.snowY >= rect.size.height) {        self.snowY = -100;    }        UIImage *image = [UIImage imageNamed:@"snow.jpg"];    [image drawAtPoint:CGPointMake(0, self.snowY)];}

通过路径画图

- (void)drawRect:(CGRect)rect{    CGContextRef ctx = UIGraphicsGetCurrentContext();        // 1.先创建一个路径    CGMutablePathRef linePath = CGPathCreateMutable();                // 2.拼接路径    CGPathMoveToPoint(linePath, NULL, 0, 0);    CGPathAddLineToPoint(linePath, NULL, 100, 100);        // 3.添加路径到上下文    CGContextAddPath(ctx, linePath);        CGMutablePathRef circlePath = CGPathCreateMutable();    CGPathAddArc(circlePath, NULL, 150, 150, 50, 0, M_PI * 2, 0);    CGContextAddPath(ctx, circlePath);        // 4.渲染    CGContextStrokePath(ctx);            CGPathRelease(linePath);    CGPathRelease(circlePath);            CGColorSpaceRef cs = CGColorSpaceCreateDeviceRGB();    CGColorSpaceRelease(cs);    //    CFRelease(linePath);//    CFRelease(circlePath);//    CFRelease(cs);}

6 0