iOS繪圖

iOS 繪圖

關於下面的繪製圖形都是在drawRect方法中，因此咱們須要創建一個類叫CustonView，繼承於UIView，而後實現drawRect方法。

繪製一個字符串

UIFont *helveticacabold = [UIFont fontWithName:@"HelveticaNeue-Bold" size:40.f];
    NSString *string = @"some String";
    NSDictionary *attibute = @{NSForegroundColorAttributeName:[UIColor whiteColor],NSFontAttributeName:helveticacabold};
    [string drawAtPoint:CGPointMake(40, 200) withAttributes:attibute];

將字符串畫在一個矩形中

//畫在一個矩形
    UIFont *helveticacabold = [UIFont fontWithName:@"HelveticaNeue-Bold" size:40.f];
    NSString *string = @"some String";
    NSDictionary *attibute = @{NSForegroundColorAttributeName:[UIColor whiteColor],NSFontAttributeName:helveticacabold};
    [string drawInRect:CGRectMake(40, 200, 100, 100) withAttributes:attibute];

獲取color的份量信息

UIColor *steelBlueColor = [UIColor colorWithRed:0.3f green:0.4f blue:0.6f alpha:1.0f];

    CGColorRef colorRef = steelBlueColor.CGColor;
    const CGFloat *components = CGColorGetComponents(colorRef);
    NSUInteger compentsCount = CGColorGetNumberOfComponents(colorRef);

    NSUInteger count = 0;
    for (count = 0; count < compentsCount; count++) {
        NSLog(@"compenent %lu = %.02f",count+1,components[count]);
    }

繪製線段

// 1. 爲圖形上下文選擇一個顏色
    [[UIColor brownColor] set];
    // 2. 獲取圖形上下文的句柄
    CGContextRef currentContext = UIGraphicsGetCurrentContext();
    // 3. 設置線條的寬度 第一個參數是當前圖形上下文 ， 第二個是線條的寬度
    CGContextSetLineWidth(currentContext, 10.0f);
    // 4. 設置線條的起點
    CGContextMoveToPoint(currentContext, 50.0f, 10.0f);
    // 5. 設置終點
    // 線
    CGContextAddLineToPoint(currentContext, 100.0f, 200.0f);
    // 矩形
//    CGContextAddRect(currentContext, CGRectMake(50, 50, 100, 100));
    // 6. 繪製上下文
    CGContextStrokePath(currentContext);

繪製一個X

// 1. 建立一個可變的句柄
    CGMutablePathRef path = CGPathCreateMutable();
    // 2. 充滿屏幕
    CGRect screenBounds = [UIScreen mainScreen].bounds;
    // 3. 開始top-left
    CGPathMoveToPoint(path, NULL, screenBounds.origin.x, screenBounds.origin.y);
    CGPathAddLineToPoint(path, NULL, screenBounds.size.width, screenBounds.size.height);
    // 4. 開始另外一條線，top-right
    CGPathMoveToPoint(path, NULL, screenBounds.size.width, screenBounds.origin.y);
    // 5. 畫線，form top-right to bottom-left
    CGPathAddLineToPoint(path, NULL, screenBounds.origin.x, screenBounds.size.height);
    // 6. 獲取圖形上下文
    CGContextRef currentRef = UIGraphicsGetCurrentContext();
    CGContextAddPath(currentRef, path);
    [[UIColor blueColor] setStroke];
    CGContextDrawPath(currentRef, kCGPathStroke);
    CGPathRelease(path);

繪製矩形

CGMutablePathRef path = CGPathCreateMutable();
    CGRect rectangle = CGRectMake(10.0f, 10.0f, 200.0f, 300.0f);
    CGPathAddRect(path, NULL, rectangle);
    CGContextRef currentContext = UIGraphicsGetCurrentContext();
    CGContextAddPath(currentContext, path);
    //充滿矩形的顏色
    [[UIColor yellowColor] setFill];
    //畫線的顏色
    [[UIColor brownColor] setStroke];
    CGContextSetLineWidth(currentContext, 10.0f);
    CGContextDrawPath(currentContext, kCGPathFillStroke);
    CGPathRelease(path);

爲形狀添加陰影

// 1. 獲取圖形上下文
    CGContextRef currentContext = UIGraphicsGetCurrentContext();
//     避免第二個矩形會被應用，須要保存上下文
    CGContextSaveGState(currentContext);
//     2. 設置陰影 參數： 1.圖形上下文 2. 偏移量-偏移量相對於將要應用陰影的形狀的右邊和底部。x偏移量越大，陰影更向形狀的右邊延伸，y偏移量越大，陰影更向形狀的底部延伸。 3. 應用到陰影的模糊值，·
    CGContextSetShadowWithColor(currentContext, CGSizeMake(10.0f, 10.0f), 20.0f, [UIColor grayColor].CGColor);
    CGMutablePathRef path = CGPathCreateMutable();
    CGRect firstRect = CGRectMake(55.0f, 60.0f, 150.0f, 150.0f);
    CGPathAddRect(path, NULL, firstRect);
    CGContextAddPath(currentContext, path);
    [[UIColor colorWithRed:0.20f green:0.60f blue:0.80f alpha:1.0f] setFill];
    CGContextDrawPath(currentContext, kCGPathFill);
    CGPathRelease(path);
//    回到以前上下文的狀態   避免第二個矩形會被應用，
    CGContextRestoreGState(currentContext);

建立和繪製漸變

// 1. 建立色彩空間
    CGContextRef currentContext = UIGraphicsGetCurrentContext();
//    CGContextSaveGState(currentContext);
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    UIColor *startColor = [UIColor orangeColor];
    CGFloat *startColorComponents = (CGFloat *)CGColorGetComponents([startColor CGColor]);
    UIColor *endColor = [UIColor blueColor];
    CGFloat *endColorComponents = (CGFloat *)CGColorGetComponents([endColor CGColor]);
    // 2. 獲取開始顏色和終點顏色的份量以後，咱們將他們放入一個扁平數組傳遞到CGGradientCreateWithColorComonents函數
    CGFloat colorComponents[8] = {
        startColorComponents[0],
        startColorComponents[1],
        startColorComponents[2],
        startColorComponents[3],
        //終點顏色份量
        endColorComponents[0],
        endColorComponents[1],
        endColorComponents[2],
        endColorComponents[3],
    };
    // 3. 由於咱們在數組中只有兩個顏色，因此咱們首先須要指定的是漸變最開始的位置0。0f,接着指定他結束的位置1.0f，
    CGFloat colorIndices[2] = {
        0.0f, /*
               color 0
               */
        1.0f, /*
               color 1
               */
    };
    // 4. 調用CGGradientCreateWithColorComonents函數
    CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, (CGFloat *)colorComponents, (CGFloat*)colorIndices, 2);
    // 5. 釋放色彩空間
    CGColorSpaceRelease(colorSpace);
    // 6. 繪製線性漸變
    CGRect screenBounds = [UIScreen mainScreen].bounds;
    CGPoint startPoint, endPoint;
    startPoint = CGPointMake(120,260);
    endPoint = CGPointMake(200.0f,220);
    // kCGGradientDrawsAfterEndLocation 擴展整個漸變到漸變的終點以後的全部點 kCGGradientDrawsBeforeStartLocation 擴展整個漸變到漸變的起點以前的全部點
    //  0 不擴展
    CGContextDrawLinearGradient(currentContext, gradient, startPoint, endPoint, 0);
    CGGradientRelease(gradient);