Exploring iPhone Graphics Part 1

本文章第一部分,主要讲了如何使用SDK在iphone上绘图,全文的绘图上下文,都是以一个窗口大小的UIVIew创建的.

使用绘图上下文来绘图,第一步就是获取当前绘图上下文.

CGContextRef ctx = UIGraphicsGetCurrentContext();  ///获取绘图上下文
CGContextClearRect(ctx, rect);  ///清除试图的画图矩形

注意,UIGraphicsGetCurrentContext返回的绘图上下文,是对应当前的UIView的,而这个绘图上下文也只有在UIView的drawRect方法中才有效,所以,不要试图保存这个上下文,或者在drawRect方法外使用他.

先开始画一个实心的红色的正方形.

CGContextSetRGBFillColor(ctx, 255, 0, 0, 1);  ///将绘图上下文设置成红色(函数参数RGBA)
CGContextFillRect(ctx, CGRectMake(10, 10, 50, 50)); ///画到坐标为10,10,长宽都为50的矩形中

CGContextSetRGBFillColor 这个函数将绘图上下文的绘制颜色设置成红色,而CGContextFillRect 看名字就知道是画一个由CGRect确定的矩形.

下面这段代码绘制一个绿色的实心圆.

CGContextSetRGBFillColor(ctx, 0, 255, 0, 1);  ///设置绿色
CGContextFillEllipseInRect(ctx, CGRectMake(100, 100, 25, 25));   ///坐标100,100,在25X25的面积内画圆形

下面这段代码绘制一个蓝色的圆形边框.

CGContextSetRGBStrokeColor(ctx, 0, 0, 255, 1);      
CGContextStrokeEllipseInRect(ctx, CGRectMake(200, 200, 50, 50));

这次使用CGContextSetRGBStrokeColor函数替代了CGContextSetRGBFillColor,这个函数设置了画刷的颜色.
而CGContextStrokeEllipseInRect函数则用于绘制一个空心的圆形.

因此,下面的代码绘制了一个黄色的空心矩形.

CGContextSetRGBStrokeColor(ctx, 255, 255, 0, 1);
CGContextStrokeRect(ctx, CGRectMake(195, 195, 60, 60));

下面的代码用三条线段创建一个三角形.

CGContextSetRGBStrokeColor(ctx, 255, 0, 255, 1);
CGPoint points[6] = {   CGPointMake(100, 200), 
                        CGPointMake(150, 250), 
                        CGPointMake(150, 250), 
                        CGPointMake(50, 250), 
                        CGPointMake(50, 250), 
                        CGPointMake(100, 200)   }; 
CGContextStrokeLineSegments(ctx, points, 6);

CGContextStrokeLineSegments函数接受一个点的数组,并且在两两之间画线.

下面这段代码会在屏幕上绘制字符串---“TrailsintheSand.com”.

char* text = "TrailsintheSand.com";
CGContextSelectFont(ctx, "Helvetica", 24.0, kCGEncodingMacRoman);  //iOS7.0以后标记为过时,使用CoreText
CGContextSetTextDrawingMode(ctx, kCGTextFill);
CGContextSetRGBFillColor(ctx, 0, 255, 255, 1);
CGAffineTransform xform = CGAffineTransformMake( 1.0, 0.0, 0.0, -1.0, 0.0, 0.0);  //第5行
CGContextSetTextMatrix(ctx, xform);      //第6行
CGContextShowTextAtPoint(ctx, 10, 300, text, strlen(text));

在这里,我们使用CGContextSelectFont函数设置了使用Helvetica字体,大小为24点.
CGContextSetTextDrawingMode函数设定了以何种方式绘制字体,kCGTextFill表示只填充字体,kCGTextStroke表示只画边框,kCGTextFillStroke表示都画.因为我们使用了kCGTextFill,所以我们需要设置一个填充颜色.        
CGContextShowTextAtPoint指定了字符串所画的位置.

这里需要注意下CGContextSetTextMatrix这个函数,如果你注释掉这个函数,那么,你显示出来的字是在正确的坐标位置,但是字却是上下颠倒的,这里关于仿射矩阵的内容会在下面的文章中更详细的研究下.

 原文中这里绘制了一个半透明的灰色矩形,很简单的操作,设置颜色的时候,第5个参数指定的就是透明程度,从0-1,0表示完全透明,1表示不透明.

原文最后一个例子,是画一张图在视图上.

// Load image from applicaiton bundle
NSString* imageFileName = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"iphone_sdk.png"];
CGDataProviderRef provider = CGDataProviderCreateWithFilename([imageFileName UTF8String]); 
CGImageRef image = CGImageCreateWithPNGDataProvider(provider, NULL, true, kCGRenderingIntentDefault);   
CGDataProviderRelease(provider);  
// Draw image 
CGContextDrawImage(ctx, CGRectMake(200, 0, 100, 100), image);
CGImageRelease(image);

在ios程序中,资源已经被打包进入了app程序,所以我们需要使用CGDataProviderRef对象来获取CGImageRef对象,需要注意的有两点,第一,默认情况下,图片和文字一样,是上下倒立显示的,第二,CGDataProviderRef对象和CGImageRef对象在使用完毕后记得释放.

        文章第一部分的绝大部分翻译完成.
        附:代码效果.