iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing

iOS: Core Graphics and Core Animation

Working with Images Core Animation Integrating with Other Apps

Tommy MacWilliam Harvard University

April 19, 2011

Announcements iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing Working with Images

I

Lectures: http://cs76.net/Lectures

Core Animation

I

Sections: http://cs76.net/Sections

Integrating with Other Apps

Today iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing

I

Core Graphics Drawing

Working with Images

I

Working with Images

Core Animation

I

Core Animation

Integrating with Other Apps

I

Integrating with Other Apps

Quartz iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing

I

Working with Images Core Animation Integrating with Other Apps

2D drawing engine for iOS I

I

works with all Core Animation, OpenGL ES, and UIKit

layers painted to canvas I

objects drawn in the order the appear

Context iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing

I

I

Working with Images

I

Core Animation Integrating with Other Apps

CGContextRef: where to draw output

I

UIGraphicsGetCurrentContext() for current window also PDFs, bitmaps, etc.

drawRect: UIView method called to draw contents I

setNeedsDisplay to force redraw

Paths iOS: Core Graphics and Core Animation Tommy MacWilliam

I

defined by CGMutablePathRef (created via CGPathCreateMutable())

I

point: single point in 2D space

Core Graphics Drawing Working with Images

I

Core Animation Integrating with Other Apps

I

CGPathMoveToPoint

line: defined by endpoints (one endpoint is current point, so define other) I

CGPathAddLineToPoint

Paths iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing

I

Working with Images Core Animation Integrating with Other Apps

cubic Bezier curves: defined by 3 control points and endpoint I

I

CGPathAddCurveToPoint

quadratic Bezier curves: defined by 2 control points and endpoint I

CGPathAddQuadCurveToPoint

Paths iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing

I

CGPathCloseSubpath: close path

Working with Images

I

CGContextAddPath: add path to context

Core Animation

I

CGContextFillPath: create shape from path

Integrating with Other Apps

I

CGContextStrokePath: create outline from path

Paths iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing

I

CGContextSetLineWidth: set stroke weight

Working with Images

I

CGContextSetLineCap: set how lines end

I

CGContextSetLineDash: draw dotted line

I

CGContextSetStrokeColorWithColor: set color (UIColors have property for CGColor)

Core Animation Integrating with Other Apps

Paths iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing Working with Images Core Animation Integrating with Other Apps

I

example time!

Shadows iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing Working with Images Core Animation Integrating with Other Apps

I

need x offset, y offset, blur

I

CGContextSetShadow or CGContextSetShadowWithColor to draw shadows

Saving State iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing

I

Working with Images

push and pop from stack of states I

resetting everything is annoying

Core Animation

I

CGContextSaveGState: push state onto stack

Integrating with Other Apps

I

CGContextRestoreGState: pop value off stack

Shadows and State iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing Working with Images Core Animation Integrating with Other Apps

I

example time!

Gradients iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing

I

CGGradientRef can create axial and radial gradients (CGGradientCreateWithColorComponents)

Working with Images

I

Core Animation

I

Integrating with Other Apps

I

axial: color varies along line (same color along perpendicular) radial: color varies along concentric circles (same color along given circumference)

need color space, colors, and locations for each color

Color Spaces iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing

I

CGColorSpaceCreateDeviceRGB(): RGB (red, green, blue)

I

CGColorSpaceCreateDeviceCMYK(): CMYK (cyan, magenta, yellow, key)

I

CGColorSpaceCreateDeviceGray(): grayscale

Working with Images Core Animation Integrating with Other Apps

Gradients iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing Working with Images Core Animation Integrating with Other Apps

I

example time!

Custom Views iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing Working with Images Core Animation Integrating with Other Apps

I

drawRect is a method of any UIView

I

subclass UIView, UIButton, etc. to create custom views

Custom Views iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing Working with Images Core Animation Integrating with Other Apps

I

example time!

UIImageView iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing Working with Images Core Animation Integrating with Other Apps

I

image: UIImage to be displayed I

I

imageWithData can load remote URL

handles scaling and aspect ratios for you!

UIImagePickerController iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing

I

modal view controller allowing for selection of image from library

I

sourceType: where to get images from

I

presentModalViewController (just like any other view controller) to display

Working with Images Core Animation Integrating with Other Apps

UIImagePickerControllerDelegate iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing

I

make sure to set delegate property!

I

imagePickerController:didFinish PickingMediaWithInfo: user selected image

Working with Images

I

Core Animation Integrating with Other Apps

I

can get UIImagePickerControllerEditedImage or UIImagePickerControllerOriginalImage from passed dictionary

imagePickerControllerDidCancel: user clicked “Cancel” instead of selecting image

Image Picker iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing Working with Images Core Animation Integrating with Other Apps

I

example time!

UIImage iOS: Core Graphics and Core Animation Tommy MacWilliam

I

UIImage ready to use with Core Graphics via CGImage

Working with Images

I

drawInRect: draw UIImage in given CGRect

Core Animation

I

CGContextDrawImage: draw CGImage in given CGRect

Core Graphics Drawing

Integrating with Other Apps

I

different coordinate system, so image will be upside-down!

Transforms iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing Working with Images Core Animation Integrating with Other Apps

I

CGContextRotateCTM: rotate about a point

I

CGContextScaleCTM: change size

I

CGContextTranslateCTM: move in a direction

Clipping iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing Working with Images Core Animation Integrating with Other Apps

I

rectangles are boring!

I

remember CGMutablePathRef?

I

CGContextClip restricts all drawings to last path

UIImage iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing Working with Images Core Animation Integrating with Other Apps

I

example time!

Core Animation iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing Working with Images Core Animation Integrating with Other Apps

I

animate 2D layers in 3D space

I

implicit: set new properties, get smooth animation

I

explicit: full control over timing, etc.

Core Animation iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing Working with Images

I

add QuartzCore.framework to project

Core Animation

I

#import “QuartzCore/CAAnimation.h”

Integrating with Other Apps

Implicit Animation iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing Working with Images

I

static methods to UIViews set animation properties

I

enclosed in beginAnimations:context: and commitAnimation

I

changed properties will animate automatically

Core Animation Integrating with Other Apps

Implicit Animation iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing Working with Images

I

setAnimationTransition: lots of stock animations built in

I

setAnimationDuration: time, in seconds, of animation

I

setAnimationDelegate, setAnimationDidStopSelector: register callbacks

Core Animation Integrating with Other Apps

Implicit Animation iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing Working with Images Core Animation Integrating with Other Apps

I

example time!

Layers iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing

I

Working with Images Core Animation Integrating with Other Apps

CALayer has contents to be animated I

I

UIView has underlying layer, so we can animate them

provide content via content property, via delegate, or subclass

Keyframe Animation iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing Working with Images Core Animation Integrating with Other Apps

I

CAKeyframeAnimation creates a custom animation

I

key path specifies what property will be animated I

animatable properties: http://developer.apple. com/library/ios/#documentation/Cocoa/ Conceptual/CoreAnimation_guide/Articles/ AnimProps.html

Animation Paths iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing Working with Images

I

CGMutablePathRef again!

I

path specifies path layer can be animated along (position keypath)

I

duration for animation in seconds

Core Animation Integrating with Other Apps

Transforms iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing

I

CATransform3DMakeRotation: rotation matrix

Working with Images

I

CATransform3DMakeScale: scaling matrix

I

CATransform3DMakeTranslation: translation matrix

I

values gives NSArray of frames

Core Animation Integrating with Other Apps

Keyframe Animations iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing Working with Images Core Animation Integrating with Other Apps

I

example time!

Opening Other Apps iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing

I

just like Android, other apps opened via URLs

Working with Images

I

[[UIApplication sharedApplication] openURL:url]

Core Animation Integrating with Other Apps

I

where url is an NSURL (schemes like http://, tel:, sms:)

Being Opened by Other Apps iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing

I

specify your own URLs with -Info.plist (like AndroidManifest.xml)

I

application:handleOpenURL: fired when app opened from URL

Working with Images Core Animation Integrating with Other Apps

Integrating with Other Apps iOS: Core Graphics and Core Animation Tommy MacWilliam Core Graphics Drawing Working with Images Core Animation Integrating with Other Apps

I

example time!

iOS: Core Graphics and Core Animation - cdn.cs76.net

Apr 19, 2011 - works with all Core Animation, OpenGL ES, and UIKit. ▷ layers painted to canvas. ▷ objects drawn in the order the appear ...

112KB Sizes 1 Downloads 203 Views

Recommend Documents

iOS: Core Graphics and Core Animation - cdn.cs76.net
19 Apr 2011 - Tommy. MacWilliam. Core Graphics. Drawing. Working with. Images. Core. Animation. Integrating with Other. Apps. Paths. ▷ CGPathCloseSubpath: close path. ▷ CGContextAddPath: add path to context. ▷ CGContextFillPath: create shape fr

Core Data, Localization, Core Graphics
http://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/CoreData/Articles/cdBasics.html. Page 6. Localization. Page 7. Core Graphics. Page 8. Coordinate System http://developer.apple.com/library/ios/documentation/WindowsViews/Conceptua

Core Data, Localization, Core Graphics - cdn.cs76.net
App Party. Fri 5/13, 5:30pm ET. Page 5. Core Data http://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/CoreData/Articles/cdBasics.html ... http://developer.apple.com/library/ios/documentation/WindowsViews/Conceptual/ViewPG_iPhoneOS/

Entrepreneurship, Innovation and Institutions - Core
education and research) at the other. Targeted ... Small Business Innovation Research program (for new technology based firms), employment ...... 171-186. Van Waarden, F. (2001) Institutions and Innovation: The Legal Environment of.

pDF Core Curriculum for Infusion Nursing (Core ...
This updated edition reflects recent changes in infusion nursing practice, ... for Infusion Nursing (Core Curriculum Series) For ios by Infusion Nurses Society}.

Do pure indivisibilities prevent core equivalence? Core ...
Graduate School of Economics, Keio University, Tokyo, Japan. This Version: January 2, 2005. Abstract. We consider a pure exchange ...... Debreu, G., 1959, Theory of value (John Wiley & Sons, New York). Debreu, G., 1962, New concepts and techniques fo

pdf-84\tom-danielsons-core-advantage-core-strength-for-cyclings ...
Denver Post. "Even if you're not suffering from back pain, [these 50 exercises] are a helpful, practical and. surefire way to improve your riding." -- RoadBikeRider.com. "In their book, Danielson and Westfahl discuss the importance of core training a

Working Paper Series - Core
favouritism, and more recently by its implication in the stock-market bubble of the ... publication of newspapers, journals, advertisements and other publicity ...

layer cake geology - Core
class that the cake represents a portion of the earth's crust with the top of the cake .... Core sample data can be collected from several locations to determine structure ... Oil companies, mining operations, and engineering geologists commonly ...

core values - Asian Access
We are committed to building and nurturing a LOVE relationship with. God—a relationship of the heart as well as the head. We long to experience. God spiritually and emotionally as well as intellectually. This love relationship grows lifelong discip

Core Curriculum.pdf
ARAB 2311 Arabic III. ARAB 2312 Arabic IV. CHIN 2311 Chinese III. CHIN 2312 Chinese IV. ENGL 2322 British Literature: Anglo-Saxon Through 18th Century.

Core Java.pdf
What is Collection Framework? Explain set Interface with example. 4. b. Explain the uses of keywords Try, Catch, throw, throws and Finally with example 5. c.

Core computer unit
Oct 12, 2001 - 9218924. 10/1992. * cited by examiner. Primary ExamineriChuong D Ngo. (57) ... could be a conventional desktop, laptop or mobile computer.

core values - Asian Access
We are committed to building and nurturing a LOVE relationship with. God—a relationship of the heart as well as the head. We long to experience. God spiritually and emotionally as well as intellectually. This love relationship grows lifelong discip