iOS 图形处理和动画处理


iPhone iPad iOS Runtime Cocoa Graphics context Cocoa Touch Cocoa Touch UIWindow UI UIKit iOS OS X UIKit UI API API Quartz 2D iOS UIKit Quartz Core Graphics Core Animation iOS iPhone 3GS iPhone4 3.5 iPhone 3GS 320480 iPhone4 4 640960 iPhone 320480 iPhone 3GS iPhone 4 1 Figure 1. Device-dependent pixel rendering yields different results on different devices 1 API iPhone 3GS iPhone4 () iOS Upper Left Origin ULO 0,0 x y x=20 x=10 y y=20 y=10 Xcode UIView view Xcode Xcode Xcode UIView 1 Xcode 2 File NewProject 3 iOS Application( 2) Figure 2. Creating a View-based Application for iOS in Xcode 4. View-based Application Next( 2) 5. Product Name ( 3) Graphics 6. Company Identifier Bundle identifier prefix com.company com.pixolity 7. Device Family iPhone Next 8.( 4) Create Xcode Xcode Graphics Xcode view : 1. Xcode Graphics 2. Graphics New File 3. iOS Cocoa Touch ( 5) Figure 3. Setting the options for a new project in Xcode Figure 4. Saving the view-based Xcode project to the desktop Figure 5. Creating a new Objective-C class in Xcode 4. Objective-Class Next 5; 5. 6 Subclass UIView Next 6. GraphicsViewControllerView.m 7. Group Graphics 7 8. Add to targets Save 7 9. Xcode GraphicsViewController.m Interface Builder Xcode 8 .xib 10. Xcode View Utilities File Inspector File Inspector Xcode 11. Interface Builder File Inspector 9 Figure 6. Creating a subclass of UIView Figure 7. Saving a subclass of UIView 12 File Inspector Identity 10 13. Custom Class Class GraphicsViewControllerView Figure 8. Selecting our view controllers xib file UIView Interface Builder view view GraphicsViewControllerView Figure 9. The file inspector in Interface Builder Figure 10. The Identity Inspector, showing our view controllers view objects information Xcode view drawRect:Cocoa Touch Cocoa Touch drawRect: Cocoa Touch UIKit API Cocoa Touch UIFont iOS Families FacesHelvetica Helvetica Bold Helvetica UIFont familyNames - (void) enumerateFonts { for (NSString *familyName in [UIFont familyNames]) { NSLog(@"Font Family = %@", familyName); } } iOS ... Font Family = Heiti TC Font Family = Sinhala Sangam MN Font Family = Kannada Sangam MN Font Family = GeorgiaFont Family = Heiti J Font Family = Times New Roman Font Family = Snell Roundhand Font Family = Geeza Pro Font Family = Helvetica Neue ... UIFont fontNamesForFamilyName: family name array - (void) enumerateFonts{ for (NSString *familyName in [UIFont familyNames]){ NSLog(@"Font Family = %@", familyName); for (NSString *fontName in [UIFont fontNamesForFamilyName:familyName]){ NSLog(@"\t%@", fontName); } } iOS : ... Font Family = Geeza Pro GeezaPro GeezaPro-Bold Font Family = Helvetica Neue HelveticaNeue-Italic HelveticaNeue-Bold HelveticaNeue-BoldItalic HelveticaNeue ... Helvetica Neue HelveticaNeue-Bold UIFont fontWithName:size: UIFont UIFont *helveticaBold = [UIFont fontWithName:@"HelveticaNeue-Bold" size:12.0f]; UIFont fontWithName:size: nil UIFont systemFontOfSize: boldSystemFontOfSize: iOS Helvetica NSString drawAtPoint:withFont: Xcode Xcode UIView GraphicsViewControllerView drawRect: #import "GraphicsViewControllerView.h" @implementation GraphicsViewControllerView - (id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { } return self; } - (void)drawRect:(CGRect)rect { // Drawing code } - (void)dealloc{ [super dealloc]; } @end drawRect: x=40 y=180 11 - (void)drawRect:(CGRect)rect{ // Drawing code UIFont *helveticaBold = [UIFont fontWithName:@"HelveticaNeue-Bold" size:40.0f]; NSString *myString = @"Some String"; [myString drawAtPoint:CGPointMake(40, 180) withFont:helveticaBold]; } Figure 11. A random string drawn on the graphical context of a view 40 Helvetica 40180Some String UIKit UIColor redColorblueColorbrownColor yellowColor UIColor colorWithRed:green:blue:alpha: UIColor red 0.0f 1.0f 0.0f 1.0f green mix 0.0f 1.0f blue 0.0f 1.0f alpha 0.0f 1.0f1.0f 0.0f UIColor set UIColor colorWithRed:green:blue:alpha: 1.0f red 0.0f green blue alpha 11 GraphicsViewController viewDidLoad - (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor whiteColor]; } NSString UIColor 30 Helvetica I Learn Really Fast - (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]; /* Load the font */ UIFont *helveticaBold = [UIFont fontWithName:@"HelveticaNeue-Bold" size:30.0f]; /* Our string to be drawn */ NSString *myString = @"I Learn Really Fast"; /* Draw the string using the font. The color has already been set */ [myString drawAtPoint:CGPointMake(25, 190) withFont:helveticaBold]; } 12 Figure 12. String drawn with a color on a graphical context NSString drawInRect:withFont: UIKit CGRect CGRectMake x x iOS y y iOS width height - (void)drawRect:(CGRect)rect { /* 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]; /* Load the font */ UIFont *helveticaBold = [UIFont boldSystemFontOfSize:30]; /* Our string to be drawn */ NSString *myString = @"I Learn Really Fast"; /* Draw the string using the font. The color has already been set */ [myString drawInRect:CGRectMake(100, /* x */ 120, /* y */ 100, /* width */ 200) /* height */ withFont:helveticaBold]; } 13 Figure 13. Drawing a string in rectangular space UIColor UIKit Core Graphics CGColor Core Graphics UIColor alpha UIColor 1. UIColor CGColor CGColorRef Core Graphics Color Reference 2. CGColorGetComponents 3. CGColorGetNumberOfComponents + /* Load the 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 componentsCount = CGColorGetNumberOfComponents(colorRef); NSUInteger counter = 0; for (counter = 0; counter < componentsCount; counter++) { NSLog(@"Component %lu = %.02f", (unsigned long)counter + 1, components[counter]); } Component 1 = 0.30 Component 2 = 0.40 Component 3 = 0.60 Component 4 = 1.00 UIKit UIImage UIImage imageNamed: Tree Texture.png imageWithData: NSData NSData initWithContentsOfFile: initWithData: NSData Google xcode filetype:png PNG Xcode iOS Xcode.png 14 Figure 14. Xcodes icon, found by searching in Google - (void)drawRect:(CGRect)rect{ // Drawing code UIImage *image = [UIImage imageNamed:@"Xcode.png"]; if (image != nil){ NSLog(@"Successfully loaded the image."); } else { NSLog(@"Failed to load the image."); } } Xcode.png Successfully loaded the image.Failed to load the image. Xcode.png UIImage drawAtPoint: UIImage CGPointMake drawInRect: UIImage CGRectMake - (void)drawRect:(CGRect)rect { /* 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)]; } drawAtPoint:(020) drawInRect:(5010) 4035 15 Figure 15. Drawing an image on a graphics context can be accomplished with two different methods 100100 100200 0,0 200 100 UIImage drawInRect: x y iOS OS X Core Graphics Core Graphics 1. 2. UIGraphicsGetCurrentContext 3. CGContextMoveToPoint 4. CGContextAddLineToPoint 5. CGContextStrokePath CGContextSetLineWidth CGFloat iOS - (void)drawRect:(CGRect)rect { /* 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); } iOS 16 Figure 16. Drawing a line on a current graphics context CGContextAddLineToPoint 2020100100 100100300100 CGContextMoveToPoint 100100 CGContextAddLineToPoint 300 100 CGContextAddLineToPoint CGContextAddLineToPoint - (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 lines */ CGContextSetLineWidth(currentContext, 5.0f); /* Start the line at this point */ CGContextMoveToPoint(currentContext, 20.0f, 20.0f); /* And end it at this point */ CGContextAddLineToPoint(currentContext, 100.0f, 100.0f); /* Extend the line to another point */ CGContextAddLineToPoint(currentContext, 300.0f, 100.0f); /* Use the context's current color to draw the lines */ CGContextStrokePath(currentContext); } 17 Figure 17. Drawing two lines at once Core Graphics CGContextSetLineJoin CGLineJoin kCGLineJoinMiter kCGLineJoinBevel kCGLineJoinRound 3 18 Figure 18. Three types of line joins in Core Graphics drawRooftopAtTopPointof:textToDis play:lineJoin: 1. 2. 3. - (void) drawRooftopAtTopPointof:(CGPoint)paramTopPoint textToDisplay:(NSString *)paramText lineJoin:(CGLineJoin)paramLineJoin { /* 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 line join */ CGContextSetLineJoin(currentContext, paramLineJoin); /* Set the width for the lines */ CGContextSetLineWidth(currentContext, 20.0f); /* Start the line at this point */ CGContextMoveToPoint(currentContext, paramTopPoint.x - 140, paramTopPoint.y + 100); /* And end it at this point */ CGContextAddLineToPoint(currentContext, paramTopPoint.x, paramTopPoint.y); /* Extend the line to another point to make the rooftop */ CGContextAddLineToPoint(currentContext, paramTopPoint.x + 140, paramTopPoint.y + 100); /* Use the context's current color to draw the lines */ CGContextStrokePath(currentContext); /* Draw the text in the rooftop using a black color */ [[UIColor blackColor] set]; /* Now draw the text */ [paramText drawAtPoint: CGPointMake(paramTopPoint.x - 40.0f, paramTopPoint.y + 60.0f) withFont:[UIFont boldSystemFontOfSize:30.0f]]; } drawRect: - (void)drawRect:(CGRect)rect{ // Drawing code [self drawRooftopAtTopPointof:CGPointMake(160.0f, 40.0f) textToDisplay:@"Miter" lineJoin:kCGLineJoinMiter]; [self drawRooftopAtTopPointof:CGPointMake(160.0f, 180.0f) textToDisplay:@"Bevel" lineJoin:kCGLineJoinBevel]; [self drawRooftopAtTopPointof:CGPointMake(160.0f, 320.0f) textToDisplay:@"Round" lineJoin:kCGLineJoinRound]; } Core Graphics CGContext Core Graphics Boundary Bounding boxes Boundary Bounding boxes Core Graphics CGPathCreateMutable CGMutablePathRef CGPathMoveToPoint CGPoint CGPathAddLineToPoint CGPoint CGContextAddPath CGContextDrawPath CGPathRelease CGPathAddRect CGRect CGContextDrawPath kCGPathStroke kCGPathFill kCGPathFillStroke X iOS Xcode Info.plist UIStatusBarHidden YES 19 Figure 19. Hiding the status bar in an iOS app using the Info.plist file - (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); } CGPathMoveToPoint NULL CGPathCreateMutableCGContextAd dPathCGContextDrawPath 20 Figure 20. Drawing on a graphics context using paths CGPathAddRect Core Graphics - (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.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); } 21 Figure 21. Drawing a rectangle using paths CGPathAddRects CGRect - (void)drawRect:(CGRect)rect{ // Drawing code /* Create the path first. Just the path handle. */ CGMutablePathRef path = CGPathCreateMutable(); /* Here are our first rectangle boundaries */ CGRect rectangle1 = CGRectMake(10.0f, 10.0f, 200.0f, 300.0f); /* And the second rectangle */ CGRect rectangle2 = CGRectMake(40.0f, 100.0f, 90.0f, 300.0f); /* Put both rectangles into an array */ CGRect rectangles[2] = {rectangle1, rectangle2 }; /* Add the rectangles to the path */ CGPathAddRects(path, NULL, (const CGRect *)&rectangles, 2); /* 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 black */ [[UIColor blackColor] 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); } 22 iOS CGPathAddRects 1.; 2. 3.CGRect 4. Figure 22. Drawing multiple rectangles at once Core Graphics Core Graphics, CGContextSetShadow 1. 2. CGSize x y 3. CGFloat 0.0f CGContextSetShadowWithColor CGContextSetShadow CGColorRef - (void) drawRectAtTopOfScreen{ /* Get the handle to the current context */ CGContextRef currentContext = UIGraphicsGetCurrentContext(); 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.20f green:0.60f blue:0.80f alpha:1.0f] setFill]; /* Fill the path on the context */ CGContextDrawPath(currentContext, kCGPathFill); /* Dispose of the path */ CGPathRelease(path); } drawRect: 23 Figure 23. Shadow applied to a rectangle - (void) drawRectAtBottomOfScreen{ /* Get the handle to the current context */ CGContextRef currentContext = UIGraphicsGetCurrentContext(); CGMutablePathRef secondPath = CGPathCreateMutable(); CGRect secondRect = CGRectMake(150.0f, 250.0f, 100.0f, 100.0f); CGPathAddRect(secondPath, NULL, secondRect); CGContextAddPath(currentContext, secondPath); [[UIColor purpleColor] setFill]; CGContextDrawPath(currentContext, kCGPathFill); CGPathRelease(secondPath); } - (void)drawRect:(CGRect)rect{ // Drawing code [self drawRectAtTopOfScreen]; [self drawRectAtBottomOfScreen]; } drawRect: drawRectAtTopOfScreen drawRect AtBottomOfScreen drawRectAtBottomOfScreen 24 Figure 24. Shadow applied to a second rectangle is not on purpose CGContextSaveGState CGContextRestoreGState drawRectAtTopOfScreen 25 Figure 25. Saving the state of the graphics context for accurate shadows - (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.20f green:0.60f blue:0.80f alpha:1.0f] setFill]; /* Fill the path on the context */ CGContextDrawPath(currentContext, kCGPathFill); /* Dispose of the path */ CGPathRelease(path); /* Restore the context to how it was when we started */ CGContextRestoreGState(currentContext); } Core Graphics Axial 26 CGGradientCreateWithColorComponents CGGradientRef CGGradientRelease CGGradientCreateWithColorComponents Figure 26. An axial gradient, starting from the color blue and ending in the color green CGGradientCreateWithColorComponents color space CGColorSpaceRef CGColorSpaceCreateDeviceRGB RGB CGFloat alpha alpha 24 4 4 CGFloat 0.0f 1.0f 26 1. 26 2. CGGradientCreateWithColorC omponents CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); 3. 26 startColorComponents endColorComponents UIColor *startColor = [UIColor blueColor]; CGFloat *startColorComponents = (CGFloat *)CGColorGetComponents([startColor CGColor]); UIColor *endColor = [UIColor greenColor]; CGFloat *endColorComponents = (CGFloat *)CGColorGetComponents([endColor CGColor]); 4. CGGradientCreateWithColorComponents CGFloat colorComponents[8] = { /* Four components of the blue color (RGBA) */ startColorComponents[0], startColorComponents[1], startColorComponents[2], startColorComponents[3], /* First color = blue */ /* Four components of the green color (RGBA) */ endColorComponents[0], endColorComponents[1], endColorComponents[2], endColorComponents[3], /* Second color = green */ }; 5. 0.0f1.0f CGGradientCreateWithColorComponents CGFloat colorIndices[2] = { 0.0f, /* Color 0 in the colorComponents array */ 1.0f, /* Color 1 in the colorComponents array */ }; 6. CGGradientCreateWithColorComponents CGGradientRef gradient = CGGradientCreateWithColorComponents (colorSpace, (const CGFloat *)&colorComponents, (const CGFloat *)&colorIndices, 2); 7. gradient CGColorSpaceCreateDeviceRGB CGColorSpaceRelease(colorSpace); CGContextDrawLinearGradient Graphics context Axial gradient CGGradientCreateWithColorComponents Start point CGPoint End point CGPoint Gradient drawing options kCGGradientDrawsAfterEndLocation kCGGradientDrawsBeforeStartLocation 0 | CGRect screenBounds = [[UIScreen mainScreen] bounds]; CGPoint startPoint, endPoint; startPoint = CGPointMake(0.0f, screenBounds.size.height / 2.0f); endPoint = CGPointMake(screenBounds.size.width, startPoint.y); CGContextDrawLinearGradient (currentContext, gradient, startPoint, endPoint, 0); CGGradientRelease(gradient); 26 CGContextDrawLinearGradient 27 Figure 27. An axial gradient with start and end point color extensions - (void)drawRect:(CGRect)rect{ 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); } CGContextDrawLinearGradient kCGGradien tDrawsBeforeStartLocation kCGGradientDrawsAfterEndLocation 27 CG ContextDrawLinearGradient 0 28 Figure 28. Axial gradient without stretched colors 28 27 27 Core Graphics 10203040 4060 40 10+30 60 20+40 CGAffineTransformMakeTranslation CGAffineTransform X Y CGPathAddRect CGAffineTransform x y CGPathAddRect - (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); } 29 Figure 29. A rectangle with an affine translation transformation 29 21 X Y 29 CGContextTranslateCTM CTM current transformation matrix CTM Core Graphics 0,0 Core Graphics CTM CTM Core Graphics 0,0 CGContextTranslateCTM CTM CTM 29 - (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); } 29 Core Graphics 100 CGAffineTransformMakeScale CGAffineTransform CGContextScaleCTM CTM CTM x y 21 21 0.5 X Y /* Scale the rectangle to half its size */ CGAffineTransform transform = CGAffineTransformMakeScale(0.5f, 0.5f); /* Add the rectangle to the path */ CGPathAddRect(path, &transform, rectangle); 30 Figure 30. Scaling a rectangle CGAffineTransformMakeScale CGContextScaleCTM 30 - (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 itssize */ 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.80 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); } CGAffineTransformMakeRotation CGAffineTransform CGContextRotateCTM 21 45 31 /* 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); CGContextRotateCTM Figure 31. Rotating a rectangle iOS UIKit UIKit Core Animation API UIKit UIView beginAnimations:context: beginAnimations:context: UIView commitAnimations beginAnimations:context: commitAnimations commitAnimations Xcode.png Xcode Google 14 Xcode UIImageView iOS 4 Programming CookbookO'Reilly 1..h Xcode GraphicsViewController.h 2. UIImageView xcodeImageView #import @interface GraphicsViewController : UIViewController { @protected UIImageView *xcodeImageView; } @property (nonatomic, retain) UIImageView *xcodeImageView; @end 3..m GraphicsViewController.m ImageView synthesize #import "GraphicsViewController.h" @implementation GraphicsViewController @synthesize xcodeImageView; - (void)dealloc { [super dealloc]; } - (void)viewDidUnload { [super viewDidUnload]; self.xcodeImageView = nil; } @end 4. Xcode.png UIImage - (id) initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil { self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]; if (self != nil) { UIImage *xcodeImage = [UIImage imageNamed:@"Xcode.png"]; xcodeImageView = [[UIImageView alloc] initWithImage:xcodeImage]; /* Just set the size to make the image smaller */ [xcodeImageView setFrame:CGRectMake(0.0f, 0.0f, 100.0f, 100.0f)]; } return self; } 5 viewDidLoad ImageView - (void) viewDidLoad{ [super viewDidLoad]; UIImage *xcodeImage = [UIImage imageNamed:@"Xcode.png"]; xcodeImageView = [[UIImageView alloc] initWithImage:xcodeImage]; /* Just set the size to make the image smaller */ [xcodeImageView setFrame:CGRectMake(0.0f, 0.0f, 100.0f, 100.0f)]; self.view.backgroundColor = [UIColor whiteColor]; [self.view addSubview:self.xcodeImageView]; } 6. 32 iOS Figure 32. Adding an image view to a view object 7. viewDidAppear: ImageView 5 - (void) viewDidAppear:(BOOL)paramAnimated{ [super viewDidAppear:paramAnimated]; /* Start from top left corner */ [self.xcodeImageView setFrame:CGRectMake(0.0f, 0.0f, 100.0f, 100.0f)]; [UIView beginAnimations: @"xcodeImageViewAnimation" context:xcodeImageView]; /* 5 seconds animation */ [UIView setAnimationDuration:5.0f]; /* Receive animation delegates */ [UIView setAnimationDelegate:self]; [UIView setAnimationDidStopSelector: @selector(imageViewDidStop:finished:context:)]; /* End at the bottom right corner */ [self.xcodeImageView setFrame: CGRectMake(200.0f, 350.0f, 100.0f, 100.0f)]; [UIView commitAnimations]; } 8. imageViewDidStop:finished:context: UIKit - (void)imageViewDidStop:(NSString *) paramAnimationID finished:(NSNumber *)paramFinished context:(void *)paramContext { NSLog(@"Animation finished."); NSLog(@"Animation ID = %@", paramAnimationID); UIImageView *contextImageView = (UIImageView *)paramContext; NSLog(@"Image View = %@", contextImageView); } 32 5 33 Figure 33. The image is animated to the bottom-right corner of the screen Animation finished. Animation ID = xcodeImageViewAnimation Image View = > ImageView UIKit UIView beginAnimations:context: setAnimationDuration: setAnimationDelegate: setter UIKit selector setAnimationDidStopSelector: 1.NSString beginAnimations:context: 2.NSNumber NSNumber Runtime YES NO 3. void * beginAnimations:context: beginAnimations:context: setAnimationWillStartSelector: 1.NSString beginAnimations:context: 2. void * beginAnimations:context: setAnimationDelay: 3.0f 3 setAnimationRepeatCount: UIView 34 Figure 34. The starting position of the animation image1 image2 image1 3 image2 image1 image2 image2 image1 image2 3 iOS 1..h @interface GraphicsViewController : UIViewController { @protected UIImageView *xcodeImageView1; UIImageView *xcodeImageView2; } @property (nonatomic, retain) UIImageView *xcodeImageView1; @property (nonatomic, retain) UIImageView *xcodeImageView2; @end 2 .m synthesize O'Reilly #import "GraphicsViewController.h" @implementation GraphicsViewController @synthesize xcodeImageView1; @synthesize xcodeImageView2; ... rest of the code 3.unloadeddeallocated - (void)dealloc{ [xcodeImageView1 release]; [xcodeImageView2 release]; [super dealloc]; } - (void)viewDidUnload{ [super viewDidUnload]; self.xcodeImageView1 = nil; self.xcodeImageView2 = nil; } 4. viewDidLoad - (void) viewDidLoad{ [super viewDidLoad]; UIImage *xcodeImage = [UIImage imageNamed:@"Xcode.png"]; xcodeImageView1 = [[UIImageView alloc] initWithImage:xcodeImage]; xcodeImageView2 = [[UIImageView alloc] initWithImage:xcodeImage]; /* Just set the size to make the images smaller */ [xcodeImageView1 setFrame:CGRectMake(0.0f, 0.0f, 100.0f, 100.0f)]; [xcodeImageView2 setFrame:CGRectMake(220.0f, 350.0f, 100.0f, 100.0f)]; self.view.backgroundColor = [UIColor whiteColor]; [self.view addSubview:self.xcodeImageView1]; [self.view addSubview:self.xcodeImageView2]; } 5 startTopLeftImageViewAnimation image1 alpha 0 - (void) startTopLeftImageViewAnimation{ /* Start from top left corner */ [self.xcodeImageView1 setFrame:CGRectMake(0.0f, [self.xcodeImageView1 setAlpha:1.0f]; [UIView beginAnimations:@"xcodeImageView1Animation" context:xcodeImageView1]; /* 3 seconds animation */ [UIView setAnimationDuration:3.0f]; /* Receive animation delegates */ [UIView setAnimationDelegate:self]; [UIView setAnimationDidStopSelector: @selector(imageViewDidStop:finished:context:)]; /* End at the bottom right corner */ [self.xcodeImageView1 setFrame:CGRectMake(220.0f, [self.xcodeImageView1 setAlpha:0.0f]; [UIView commitAnimations]; } 6. startTopLeftImageViewAnimation UIView setAnimationDidStopSelector: image1 image2 - (void)imageViewDidStop:(NSString *) paramAnimationID finished:(NSNumber *)paramFinished context:(void *)paramContext{ UIImageView *contextImageView = (UIImageView *)paramContext; [contextImageView removeFromSuperview]; } 7. image2 image2 image1 image2 image1 image1 3 image2 image1 2.0 image2 image1 image2 2 1 p.m.image1 13:00:00 130003 image2 130002 130005 image2 - (void) startBottomRightViewAnimationAfterDelay: (CGFloat)paramDelay { /* Start from bottom right corner */ [self.xcodeImageView2 setFrame:CGRectMake(220.0f, 350.0f, 100.0f, 100.0f)]; [self.xcodeImageView2 setAlpha:1.0f]; [UIView beginAnimations:@"xcodeImageView2Animation" context:xcodeImageView2]; /* 3 seconds animation */ [UIView setAnimationDuration:3.0f]; [UIView setAnimationDelay:paramDelay]; /* Receive animation delegates */ [UIView setAnimationDelegate:self]; [UIView setAnimationDidStopSelector: @selector(imageViewDidStop:finished:context:)]; /* End at the top left corner */ [self.xcodeImageView2 setFrame:CGRectMake(0.0f, 0.0f, 100.0f, 100.0f) [self.xcodeImageView2 setAlpha:0.0f]; [UIView commitAnimations]; } 8 startTop LeftImageViewAnimation startBottomRightViewAnimationAfterDe lay: - (void) viewDidAppear:(BOOL)paramAnimated { [super viewDidAppear:paramAnimated]; [self startTopLeftImageViewAnimation]; [self startBottomRightViewAnimationAfterDelay:2.0f]; } / - (void) viewDidAppear:(BOOL)paramAnimated{ [super viewDidAppear:paramAnimated]; /* Place the image view at the center of the view of this view controller */ self.xcodeImageView.center = self.view.center; /* Make sure no translation is applied to this image view */ self.xcodeImageView.transform = CGAffineTransformIdentity; /* Begin the animation */ [UIView beginAnimations:nil context:NULL]; /* Make the animation 5 seconds long */ [UIView setAnimationDuration:5.0f]; /* Make the image view twice as large in width and height */ self.xcodeImageView.transform = CGAffineTransformMakeScale(2.0f, 2.0f); /* Commit the animation */ [UIView commitAnimations]; } 100100 100100 frame frame frame x y Xcode.png 14 5 90 90 - (void) viewDidAppear:(BOOL)paramAnimated{ [super viewDidAppear:paramAnimated]; self.xcodeImageView.center = self.view.center; /* Begin the animation */ [UIView beginAnimations:@"clockwiseAnimation" context:NULL]; /* Make the animation 5 seconds long */ [UIView setAnimationDuration:5.0f]; [UIView setAnimationDelegate:self]; [UIView setAnimationDidStopSelector: @selector(clockwiseRotationStopped:finished:context:)]; /* Rotate the image view 90 degrees */ self.xcodeImageView.transform = CGAffineTransformMakeRotation((90.0f * M_PI) / 180.0f); /* Commit the animation */ [UIView commitAnimations]; } clockwiseRotationStopped:finished:context: 5 0 - (void)clockwiseRotationStopped:(NSString *)paramAnimationID finished:(NSNumber *)paramFinished context:(void *)paramContext{ [UIView beginAnimations:@"counterclockwiseAnimation" context:NULL]; /* 5 seconds long */ [UIView setAnimationDuration:5.0f]; /* Back to original rotation */ self.xcodeImageView.transform = CGAffineTransformIdentity; [UIView commitAnimations]; } UIView UIView Xcode Organizer UIView
还剩87页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 15 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

saverobort

贡献于2012-06-06

下载需要 15 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf