天天看點

IOS 繪制 之漸變

轉自:http://www.jianshu.com/p/f80ef6219d6b

分為線性漸變和徑向漸變

一 建立顔色空間

二 建立漸變

三 設定裁剪區域

四 繪制漸變

五 釋放對象

線性漸變

#pragma mark 線性漸變
- (void)drawGradient:(CGContextRef)context
{
    //步驟:
        /*
         一  建立顔色空間
         二  建立漸變
         三  設定裁剪區域
         四  繪制漸變
         五  釋放對象
         */

    //繪制漸變

    //在計算機設定中,直接選擇rgb即可,其他顔色空間暫時不用考慮。
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

    //1.建立漸變
    /*
     1.<#CGColorSpaceRef space#> : 顔色空間 rgb
     2.<#const CGFloat *components#> : 數組 每四個一組 表示一個顔色 {r,g,b,a ,r,g,b,a}
     3.<#const CGFloat *locations#>:表示漸變的開始位置

     */
    CGFloat components[] = {,,,,,,,};
    CGFloat locations[] = {,};

    CGGradientRef gradient=CGGradientCreateWithColorComponents(colorSpace, components, locations, );
    //漸變區域裁剪
//    CGContextClipToRect(context, CGRectMake(0, 360, 200, 100));
    CGRect rect[] = {CGRectMake(, , , ),CGRectMake(, , , ),CGRectMake(, , , ),CGRectMake(, , , ),CGRectMake(, , , )};
    CGContextClipToRects(context, rect, );
    //繪制漸變
    CGContextDrawLinearGradient(context, gradient, CGPointMake(, ), CGPointMake(, ), kCGGradientDrawsAfterEndLocation);
    //釋放對象
    CGColorSpaceRelease(colorSpace);
    CGGradientRelease(gradient);
}
           

徑向漸變

#pragma mark 徑向漸變
- (void)drawGradient2:(CGContextRef)context
{
    //步驟:
    /*
     一  建立顔色空間
     二  建立漸變
     三  設定裁剪區域
     四  繪制漸變
     五  釋放對象
     */

    //繪制漸變

    //在計算機設定中,直接選擇rgb即可,其他顔色空間暫時不用考慮。
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

    //1.建立漸變
    /*
     1.<#CGColorSpaceRef space#> : 顔色空間 rgb
     2.<#const CGFloat *components#> : 數組 每四個一組 表示一個顔色 {r,g,b,a ,r,g,b,a}
     3.<#const CGFloat *locations#>:表示漸變的開始位置

     */
    CGFloat components[] = {,,,,,,,};
    CGFloat locations[] = {,};

    CGGradientRef gradient=CGGradientCreateWithColorComponents(colorSpace, components, locations, );

    //繪制漸變
    /*
        參數:
        一 context
        二 gradient
        三 statCenter 起始中心點
        四 sartRadius 起始半徑 指定為0  從圓心漸變  否則  中心位置不漸變
        五 endCenter  結束中心點(通常與起始專心點重合)
        六 endRadius  結束半徑
        七 漸變填充方式

     */
    CGContextDrawRadialGradient(context, gradient, CGPointMake(, ), , CGPointMake(, ), ,kCGGradientDrawsAfterEndLocation);

    //釋放對象
    CGColorSpaceRelease(colorSpace);
    CGGradientRelease(gradient);

}