Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Multithreaded Drawing by Eric Lanz
Search
Triangle Cocoa
August 23, 2012
Programming
3
210
Multithreaded Drawing by Eric Lanz
Eric discusses multithreaded drawing with Core Graphics at CocoaHeads August in Raleigh
Triangle Cocoa
August 23, 2012
Tweet
Share
More Decks by Triangle Cocoa
See All by Triangle Cocoa
App Store Secrets by Lawrence Ingraham
trianglecocoa
1
280
iPhone 5 and You! by Ameir Al-Zoubi
trianglecocoa
0
180
Grand Central Dispatch by Jody Hagins
trianglecocoa
2
480
Instruments: Leaks by Trevor Brown
trianglecocoa
5
150
Foundation Collections by Kevin Conner
trianglecocoa
3
250
Unburdened ViewControllers by Jay Thrash
trianglecocoa
9
11k
Automated Acceptance Testing by Josh Johnson
trianglecocoa
4
180
Understanding UIResponder by Dirk Smith
trianglecocoa
5
320
Taming Xcode by Jay Thrash
trianglecocoa
3
140
Other Decks in Programming
See All in Programming
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
440
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
240
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
460
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
870
Laravel Boost 超入門
fire_arlo
3
220
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
270
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
A Tale of Four Properties
chriscoyier
160
23k
RailsConf 2023
tenderlove
30
1.2k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Become a Pro
speakerdeck
PRO
29
5.5k
How STYLIGHT went responsive
nonsquared
100
5.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Transcript
Multithreaded Drawing with core graphics Eric.Lanz @OrgBook.com
What you should do • Get an artist to make
all your graphics up front • Use tools like GraphicsMagick, OptiPng and PVRTC (OpenGL) • Use built in cache mechanisms • UIKit -> Core Animation -> OpenGL
What if you can’t • User defined image data at
run-time • Continuous animation responding to user interaction • Too much image data to pre-process and ship with the app
Know when to draw View Controllers Drawables Drawables Drawables Drawables
User Input • User triggers redraw • View controllers determine layout • Don’t directly call draw on a drawable
Synchronous Data API View Controllers Drawables Drawables Drawables Drawables Data
Controller User Input Core Data No Local Copy? Return a fake object while you wait for the API
Asynchronous Draw API View Controllers Drawables Drawables Drawables Drawables Data
Controller User Input Core Data Targeted NSNotifications: @”ObjectUpdate_XYZ”
Drawing Pipeline Render Controller Drawable • Drawable asks to be
drawn using some template • Entire operation contained in a block
Direct Draw Controller Drawable Direct Template Core Graphics Cache 1
Dispatch Serial Queue Draw Controller Drawable Dispatch_Serial Template Core Graphics
Cache 2 Create a serial dispatch queue, this will run one task at a time on a worker thread.
Dispatch Global Queue Draw Controller Drawable Dispatch_Global Template Core Graphics
Cache 3 Use the Global dispatch queue, this runs tasks concurrently on multiple worker threads.
All Together Now Draw Controller Drawable Dispatch_Global Template Core Graphics
Cache 3 Dispatch_Serial Template Core Graphics Cache 2 Direct Template Core Graphics Cache 1
Dispatch Serial Queue UIGraphicsPushContext(c); [[UIColor blackColor] setFill]; [@"Sample" drawInRect:CGRectMake(0, 4,
width, height) withFont:[UIFont fontWithName:@"Helvetica" size:fontSize] lineBreakMode:UILineBreakModeTailTruncation alignment:UITextAlignmentCenter]; UIGraphicsPopContext(); CGContextRelease(c); CGColorSpaceRelease(genericRGBColorspace); GLubyte *imageData = (GLubyte *) calloc(1, width * height * 4); CGColorSpaceRef genericRGBColorspace = CGColorSpaceCreateDeviceRGB(); CGContextRef c = CGBitmapContextCreate(imageData, width, height, 8, width * 4, genericRGBColorspace, kCGBitmapByteOrder32Little | kCGImageAlphaPremultipliedFirst);
Dispatch Global CGContextScaleCTM(c, 1.0, -1.0); CGContextTranslateCTM(c, 0, -height); CGMutablePathRef circlePath
= CGPathCreateMutable(); CGPathAddEllipseInRect( circlePath , NULL , CGRectMake(1, 1, width-2, height-2) ); CGContextAddPath(c, circlePath); CGContextClip(c); UIImage * personImage = [UIImage imageWithContentsOfFile:path]; CGContextDrawImage(c, CGRectMake(0, 0, width, height), personImage.CGImage); CGContextRelease(c); CGColorSpaceRelease(genericRGBColorspace); GLubyte *imageData = (GLubyte *) calloc(1, width * height * 4); CGColorSpaceRef genericRGBColorspace = CGColorSpaceCreateDeviceRGB(); CGContextRef c = CGBitmapContextCreate(imageData, width, height, 8, width * 4, genericRGBColorspace, kCGBitmapByteOrder32Little | kCGImageAlphaPremultipliedFirst);
Final Thoughts • No architecture is perfect • Maintain balance
• Make it easy to tweak • Don’t get lost in the details
Questions