ios 基本圖形的繪制 – iPhone手機開發技術文章 iPhone軟體開發教學課程

基本圖形的繪制 包括: 代碼畫線,畫文字 圖片 裁剪 重繪 簡單動畫

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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *