iOS Graphics 编程
Apple提供了以下几个框架来进行Graphics 和 Animations编程
1、UIKit
The high-level framework that allows developers to create views, windows, buttons, and other UI related components. It also incorporates some of the low-level APIs into an easier-to-use high-level API.
2、 Quartz 2D
The main engine running under the hood to facilitate drawing in iOS; UIKit usesQuartz.
3、Core Graphics
A framework that supports the graphics context (more on this later), loading images,drawing images, and so on.
4、 Core Animation
A framework that, as its name implies, facilitates animations in iOS.
font families：
- (void) enumerateFonts{ for (NSString *familyName in [UIFont familyNames]){ NSLog(@"Font Family = %@", familyName); } }
fontName：
- (void) enumerateFonts{ for (NSString *familyName in [UIFont familyNames]){ NSLog(@"Font Family = %@", familyName); for (NSString *fontName in [UIFont fontNamesForFamilyName:familyName]){ NSLog(@"\t%@", fontName); } } }
加载字体：
UIFont *helveticaBold = [UIFont fontWithName:@"HelveticaNeue-Bold" size:12.0f];
画字：
首先创建一个UIView的子类，然后在drawRect方法中处理：
#import "GraphicsViewControllerView.h" @implementation GraphicsViewControllerView - (id)initWithFrame:(CGRect)frame{ self = [super initWithFrame:frame]; if (self) { // Initialization code } return self; } - (void)drawRect:(CGRect)rect{ // Drawing code /* Load the color */ UIColor *magentaColor = [UIColor colorWithRed:0.5f green:0.0f blue:0.5f alpha:1.0f]; /* Set the color in the graphical context */ [magentaColor set]; UIFont *helveticaBold = [UIFont fontWithName:@"HelveticaNeue-Bold" size:40.0f]; NSString *myString = @"Some String"; [myString drawAtPoint:CGPointMake(40, 180) withFont:helveticaBold]; /* Our string to be drawn */ NSString *myString2 = @"I Learn Really Fast"; /* Draw the string using the font. The color has already been set */ [myString2 drawInRect:CGRectMake(100, /* x */ 120, /* y */ 100, /* width */ 200) /* height */ withFont:helveticaBold]; } - (void)dealloc{ [super dealloc]; } @en
#import "GraphicsViewControllerView.h" @implementation GraphicsViewControllerView - (id)initWithFrame:(CGRect)frame{ self = [super initWithFrame:frame]; if (self) { // Initialization code } return self;
} - (void)drawRect:(CGRect)rect{ // Drawing code /* Load the color */ UIColor *magentaColor = [UIColor colorWithRed:0.5f green:0.0f blue:0.5f alpha:1.0f]; /* Set the color in the graphical context */ [magentaColor set]; UIFont *helveticaBold = [UIFont fontWithName:@"HelveticaNeue-Bold" size:40.0f]; NSString *myString = @"Some String"; [myString drawAtPoint:CGPointMake(40, 180) withFont:helveticaBold]; /* Our string to be drawn */ NSString *myString2 = @"I Learn Really Fast"; /* Draw the string using the font. The color has already been set */ [myString2 drawInRect:CGRectMake(100, /* x */ 120, /* y */ 100, /* width */ 200) /* height */ withFont:helveticaBold]; } - (void)dealloc{ [super dealloc]; } @en
画图片：
- (void)drawRect:(CGRect)rect{ // Drawing code /* Assuming the image is in your app bundle and we can load it */ UIImage *xcodeIcon =[UIImage imageNamed:@"Xcode.png"]; [xcodeIcon drawAtPoint:CGPointMake(0.0f,20.0f)]; [xcodeIcon drawInRect:CGRectMake(50.0f, 10.0f, 40.0f, 35.0f)]; }
画线：
- (void)drawRect:(CGRect)rect{
// Drawing code /* Set the color that we want to use to draw the line */ [[UIColor brownColor] set]; /* Get the current graphics context */ CGContextRef currentContext = UIGraphicsGetCurrentContext(); /* Set the width for the line */ CGContextSetLineWidth(currentContext,5.0f); /* Start the line at this point */ CGContextMoveToPoint(currentContext,50.0f,10.0f); /* And end it at this point */ CGContextAddLineToPoint(currentContext,100.0f,200.0f); /* Use the context's current color to draw the line */ CGContextStrokePath(currentContext); }
PATH：
Here are the methods you have to work with:
CGPathCreateMutable function
Creates a new mutable path of type CGMutablePathRef and returns its handle. We
should dispose of this path once we are done with it, as you will soon see.
CGPathMoveToPoint procedure
Moves the current pen position on the path to the point specified by a parameter
of type CGPoint.
CGPathAddLineToPoint procedure
Draws a line segment from the current pen position to the specified position (again,
specified by a value of type CGPoint).
CGContextAddPath procedure
Adds a given path (specified by a path handle) to a graphics context, ready for
drawing.
CGContextDrawPath procedure
Draws a given path on the graphics context.
CGPathRelease procedure
Releases the memory allocated for a path handle.
CGPathAddRect procedure
Adds a rectangle to a path. The rectangle’s boundaries are specified by a CGRect
structure.
There are three important drawing methods that you can ask the CGContextDrawPath
procedure to perform:
kCGPathStroke
Draws a line (stroke) to mark the boundary or edge of the path, using the currently
selected stroke color.
kCGPathFill
Fills the area surrounded by the path with the currently selected fill color.
kCGPathFillStroke
Combines stroke and fill. Uses the currently selected fill color to fill the path, and
the currently selected stroke color to draw the edge of the path. We’ll see an example
of this method in the following section
- (void)drawRect:(CGRect)rect{ // Drawing code /* Create the path */ CGMutablePathRef path = CGPathCreateMutable(); /* How big is our screen? We want the X to cover the whole screen */ CGRect screenBounds = [[UIScreen mainScreen] bounds]; /* Start from top-left */ CGPathMoveToPoint(path,NULL,screenBounds.origin.x,screenBounds.origin.y); /* Draw a line from top-left to bottom-right of the screen */ CGPathAddLineToPoint(path,NULL,screenBounds.size.width,screenBounds.size.height); /* Start another line from top-right */ CGPathMoveToPoint(path,NULL,screenBounds.size.width,screenBounds.origin.y); /* Draw a line from top-right to bottom-left */ CGPathAddLineToPoint(path,NULL,screenBounds.origin.x,screenBounds.size.height); /* Get the context that the path has to be drawn on */ CGContextRef currentContext =UIGraphicsGetCurrentContext(); /* Add the path to the context so we can draw it later */ CGContextAddPath(currentContext,path); /* Set the blue color as the stroke color */ [[UIColor blueColor] setStroke]; /* Draw the path with stroke color */ CGContextDrawPath(currentContext,kCGPathStroke); /* Finally release the path object */ CGPathRelease(path); }
画矩形：
- (void)drawRect:(CGRect)rect{ // Drawing code /* Create the path first. Just the path handle. */ CGMutablePathRef path = CGPathCreateMutable(); /* Here are our rectangle boundaries */ CGRect rectangle = CGRectMake(10.0f,10.0f,200.0f,300.0f); /* Add the rectangle to the path */ CGPathAddRect(path,NULL,rectangle); /* Get the handle to the current context */ CGContextRef currentContext =UIGraphicsGetCurrentContext(); /* Add the path to the context */ CGContextAddPath(currentContext,path); /* Set the fill color to cornflower blue */ [[UIColor colorWithRed:0.20fgreen:0.60f blue:0.80f alpha:1.0f] setFill]; /* Set the stroke color to brown */ [[UIColor brownColor] setStroke]; /* Set the line width (for the stroke) to 5 */ CGContextSetLineWidth(currentContext,5.0f); /* Stroke and fill the path on the context */ CGContextDrawPath(currentContext,kCGPathFillStroke); /* Dispose of the path */ CGPathRelease(path); }
给图形增加阴影：
- (void) drawRectAtTopOfScreen{ /* Get the handle to the current context */ CGContextRef currentContext = UIGraphicsGetCurrentContext();
CGContextSaveGState(currentContext);
CGContextSetShadowWithColor(currentContext, CGSizeMake(10.0f, 10.0f),20.0f,[[UIColor grayColor] CGColor]); /* Create the path first. Just the path handle. */ CGMutablePathRef path = CGPathCreateMutable(); /* Here are our rectangle boundaries */ CGRect firstRect = CGRectMake(55.0f,60.0f,150.0f,150.0f); /* Add the rectangle to the path */ CGPathAddRect(path,NULL,firstRect); /* Add the path to the context */ CGContextAddPath(currentContext,path); /* Set the fill color to cornflower blue */ [[UIColor colorWithRed:0.20fgreen:0.60f，blue:0.80f，alpha:1.0f] setFill]; /* Fill the path on the context */ CGContextDrawPath(currentContext,kCGPathFill); /* Dispose of the path */ CGPathRelease(path);
CGContextRestoreGState(currentContext);
}
Gradients：
- (void)drawRect:(CGRect)rect{ // Drawing code 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]); CGFloat colorComponents[8] = { /* Four components of the orange color (RGBA) */ startColorComponents[0], startColorComponents[1], startColorComponents[2], startColorComponents[3], /* First color = orange */ /* Four components of the blue color (RGBA) */ endColorComponents[0], endColorComponents[1], endColorComponents[2], endColorComponents[3], /* Second color = blue */ }; CGFloat colorIndices[2] = { 0.0f, /* Color 0 in the colorComponents array */ 1.0f, /* Color 1 in the colorComponents array */ }; CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace,(const CGFloat *)&colorComponents,(const CGFloat *)&colorIndices,2); CGColorSpaceRelease(colorSpace); CGPoint startPoint, endPoint; startPoint = CGPointMake(120,260); endPoint = CGPointMake(200.0f,220); CGContextDrawLinearGradient(currentContext,gradient,startPoint,endPoint,kCGGradientDrawsBeforeStartLocation |kCGGradientDrawsAfterEndLocation);
CGGradientRelease(gradient); CGContextRestoreGState(currentContext); }
Displacing Shapes
- (void)drawRect:(CGRect)rect{ // Drawing code /* Create the path first. Just the path handle. */
CGMutablePathRef path = CGPathCreateMutable(); /* Here are our rectangle boundaries */
CGRect rectangle = CGRectMake(10.0f, 10.0f,200.0f, 300.0f); /* We want to displace the rectangle to the right by 100 points but want to keep the y position untouched */ CGAffineTransform transform = CGAffineTransformMakeTranslation(100.0f,0.0f); /* Add the rectangle to the path */
CGPathAddRect(path,&transform, rectangle); /* Get the handle to the current context */ CGContextRef currentContext = UIGraphicsGetCurrentContext(); /* Add the path to the context */
CGContextAddPath(currentContext,path); /* Set the fill color to cornflower blue */
[[UIColor colorWithRed:0.20f green:0.60f blue:0.80f alpha:1.0f] setFill]; /* Set the stroke color to brown */
[[UIColor brownColor] setStroke]; /* Set the line width (for the stroke) to 5 */
CGContextSetLineWidth(currentContext,5.0f); /* Stroke and fill the path on the context */
CGContextDrawPath(currentContext,kCGPathFillStroke); /* Dispose of the path */
CGPathRelease(path); }
- (void)drawRect:(CGRect)rect{ // Drawing code /* Create the path first. Just the path handle. */
CGMutablePathRef path = CGPathCreateMutable(); /* Here are our rectangle boundaries */
CGRect rectangle = CGRectMake(10.0f, 10.0f,200.0f, 300.0f); /* Add the rectangle to the path */
CGPathAddRect(path,NULL, rectangle); /* Get the handle to the current context */
CGContextRef currentContext = UIGraphicsGetCurrentContext(); /* Save the state of the context to revert back to how it was at this state, later */ CGContextSaveGState(currentContext); /* Translate the current transformation matrix to the right by 100 points */ CGContextTranslateCTM(currentContext, 100.0f,0.0f); /* Add the path to the context */
CGContextAddPath(currentContext,path); /* Set the fill color to cornflower blue */
[[UIColor colorWithRed:0.20f green:0.60f blue:0.80f alpha:1.0f] setFill]; /* Set the stroke color to brown */
[[UIColor brownColor] setStroke]; /* Set the line width (for the stroke) to 5 */
CGContextSetLineWidth(currentContext,5.0f); /* Stroke and fill the path on the context */
CGContextDrawPath(currentContext,kCGPathFillStroke); /* Dispose of the path */
CGPathRelease(path); /* Restore the state of the context */
CGContextRestoreGState(currentContext); }
Scaling Shapes
/* Scale the rectangle to half its size */
CGAffineTransform transform = CGAffineTransformMakeScale(0.5f, 0.5f); /* Add the rectangle to the path */
CGPathAddRect(path,&transform, rectangle);
- (void)drawRect:(CGRect)rect{ // Drawing code /* Create the path first. Just the path handle. */
CGMutablePathRef path = CGPathCreateMutable(); /* Here are our rectangle boundaries */
CGRect rectangle = CGRectMake(10.0f, 10.0f,200.0f, 300.0f); /* Add the rectangle to the path */
CGPathAddRect(path,NULL, rectangle); /* Get the handle to the current context */ CGContextRef currentContext = UIGraphicsGetCurrentContext(); /* Scale everything drawn on the current graphics context to half its size */ CGContextScaleCTM(currentContext, 0.5f,0.5f); /* Add the path to the context */
CGContextAddPath(currentContext,path); /* Set the fill color to cornflower blue */
[[UIColor colorWithRed:0.20f green:0.60f blue:0.80f alpha:1.0f] setFill]; /* Set the stroke color to brown */
[[UIColor brownColor] setStroke]; /* Set the line width (for the stroke) to 5 */
CGContextSetLineWidth(currentContext,5.0f); /* Stroke and fill the path on the context */
CGContextDrawPath(currentContext,kCGPathFillStroke); /* Dispose of the path */ CGPathRelease(path); }
Rotating Shapes
/* Rotate the rectangle 45 degrees clockwise */ CGAffineTransform transform = CGAffineTransformMakeRotation((45.0f * M_PI) / 180.0f); /* Add the rectangle to the path */
CGPathAddRect(path,&transform, rectangle);
