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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Triangle Cocoa
August 23, 2012
Programming
230
3
Share
Multithreaded Drawing by Eric Lanz
Eric discusses multithreaded drawing with Core Graphics at CocoaHeads August in Raleigh
Triangle Cocoa
August 23, 2012
More Decks by Triangle Cocoa
See All by Triangle Cocoa
App Store Secrets by Lawrence Ingraham
trianglecocoa
1
320
iPhone 5 and You! by Ameir Al-Zoubi
trianglecocoa
0
200
Grand Central Dispatch by Jody Hagins
trianglecocoa
2
510
Instruments: Leaks by Trevor Brown
trianglecocoa
5
170
Foundation Collections by Kevin Conner
trianglecocoa
3
270
Unburdened ViewControllers by Jay Thrash
trianglecocoa
9
11k
Automated Acceptance Testing by Josh Johnson
trianglecocoa
4
200
Understanding UIResponder by Dirk Smith
trianglecocoa
5
360
Taming Xcode by Jay Thrash
trianglecocoa
3
170
Other Decks in Programming
See All in Programming
Symfonyの特性(設計思想)を手軽に活かす特性(trait)
ickx
0
120
AI時代のシステム設計:ドメインモデルで変更しやすさを守る設計戦略
masuda220
PRO
7
1.2k
PHP でエミュレータを自作して Ubuntu を動かそう
m3m0r7
PRO
2
170
感情を設計する
ichimichi
5
1.1k
[PHPerKaigi 2026]PHPerKaigi2025の企画CodeGolfが最高すぎて社内で内製して半年運営して得た内製と運営の知見
ikezoemakoto
0
330
Smarter Angular mit Transformers.js & Prompt API
christianliebel
PRO
1
120
Nuxt Server Components
wattanx
0
240
今こそ押さえておきたい アマゾンウェブサービス(AWS)の データベースの基礎 おもクラ #6版
satoshi256kbyte
1
230
へんな働き方
yusukebe
6
2.9k
Reactive ❤️ Loom: A Forbidden Love Story
franz1981
2
220
モックわからないマン卒業記 ~振る舞いを起点に見直した、フロントエンドテストにおけるモックの使いどころ~
tasukuwatanabe
3
440
iOS機能開発のAI環境と起きた変化
ryunakayama
0
150
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Art, The Web, and Tiny UX
lynnandtonic
304
21k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
WCS-LA-2024
lcolladotor
0
520
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
880
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
52k
Agile that works and the tools we love
rasmusluckow
331
21k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
The browser strikes back
jonoalderson
0
890
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