Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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
220
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
290
iPhone 5 and You! by Ameir Al-Zoubi
trianglecocoa
0
190
Grand Central Dispatch by Jody Hagins
trianglecocoa
2
490
Instruments: Leaks by Trevor Brown
trianglecocoa
5
160
Foundation Collections by Kevin Conner
trianglecocoa
3
260
Unburdened ViewControllers by Jay Thrash
trianglecocoa
9
11k
Automated Acceptance Testing by Josh Johnson
trianglecocoa
4
190
Understanding UIResponder by Dirk Smith
trianglecocoa
5
330
Taming Xcode by Jay Thrash
trianglecocoa
3
150
Other Decks in Programming
See All in Programming
Context is King? 〜Verifiability時代とコンテキスト設計 / Beyond "Context is King"
rkaga
6
1k
俺流レスポンシブコーディング 2025
tak_dcxi
14
8.5k
AWS CDKの推しポイントN選
akihisaikeda
1
240
UIデザインに役立つ 2025年の最新CSS / The Latest CSS for UI Design 2025
clockmaker
18
7.2k
Microservices Platforms: When Team Topologies Meets Microservices Patterns
cer
PRO
1
1k
ZOZOにおけるAI活用の現在 ~モバイルアプリ開発でのAI活用状況と事例~
zozotech
PRO
8
5.4k
JETLS.jl ─ A New Language Server for Julia
abap34
1
200
エディターってAIで操作できるんだぜ
kis9a
0
700
Building AI Agents with TypeScript #TSKaigiHokuriku
izumin5210
6
1.2k
ハイパーメディア駆動アプリケーションとIslandアーキテクチャ: htmxによるWebアプリケーション開発と動的UIの局所的適用
nowaki28
0
390
認証・認可の基本を学ぼう前編
kouyuume
0
190
開発に寄りそう自動テストの実現
goyoki
1
760
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
330
39k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.3k
Leading Effective Engineering Teams in the AI Era
addyosmani
8
1.3k
Testing 201, or: Great Expectations
jmmastey
46
7.8k
Large-scale JavaScript Application Architecture
addyosmani
515
110k
GraphQLとの向き合い方2022年版
quramy
50
14k
Java REST API Framework Comparison - PWX 2021
mraible
34
9k
Producing Creativity
orderedlist
PRO
348
40k
RailsConf 2023
tenderlove
30
1.3k
How STYLIGHT went responsive
nonsquared
100
6k
Why You Should Never Use an ORM
jnunemaker
PRO
61
9.6k
Rails Girls Zürich Keynote
gr2m
95
14k
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