ios 基本圖形的繪製

標籤：blog   class   code   c   tar   ext   

基本圖形的繪製 包括： 代碼畫線，畫文字 圖片 裁剪 重繪  簡單動畫

當自訂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)];}