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
Drawing with Code
Search
Ryan Nystrom
October 25, 2013
Programming
1
210
Drawing with Code
Drawing with Code - presented at M3 Conf (
http://m3conf.com
) 2013
Ryan Nystrom
October 25, 2013
Tweet
Share
More Decks by Ryan Nystrom
See All by Ryan Nystrom
Animation & Interaction Design
rnystrom
2
200
Facebook Pop
rnystrom
2
630
Facebook & Mobile
rnystrom
0
73
Open Source for the Open Mind
rnystrom
2
180
Mobile Debugging
rnystrom
0
95
Migrating to iOS 7
rnystrom
1
210
Minimal-first Design & Development
rnystrom
1
140
Learning iOS: Part 1
rnystrom
3
78
Other Decks in Programming
See All in Programming
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
SpringBoot3.4の構造化ログ #kanjava
irof
2
980
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
120
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
Software Architecture
hschwentner
6
2.1k
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
技術を根付かせる / How to make technology take root
kubode
1
240
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
720
Rails アプリ地図考 Flush Cut
makicamel
1
110
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
130
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
We Have a Design System, Now What?
morganepeng
51
7.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
960
Into the Great Unknown - MozCon
thekraken
35
1.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Building Adaptive Systems
keathley
40
2.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Transcript
Drawing with Code @_ryannystrom
QuartzCore.framework
None
None
Runs on CPU Runs on GPU
Geometry
MYView
MYView
MYView
None
(0, 0)
(0, 0) (width, height)
struct CGPoint {! CGFloat x;! CGFloat y;! };! typedef struct
CGPoint CGPoint;
struct CGSize {! CGFloat width;! CGFloat height;! };! typedef struct
CGSize CGSize;
struct CGRect {! CGPoint origin;! CGSize size;! };! typedef struct
CGRect CGRect;
UIView *view = [[UIView alloc] init];! view.frame = CGRectMake(0, 0,
200, 150);
UIView *view = [[UIView alloc] init];! view.frame = {0, 0,
200, 150};
480 320 (0, 0) (200, 150)
480 320 (0, 0) (200, 150)
Drawing
@interface MYView : UIView! // public properties + methods! @end
@implementation MYView! ! - (void)drawRect:(CGRect)rect {! // draw here! }!
! @end
- (void)drawRect:(CGRect)rect {! // get our current drawing context! CGContextRef
ctx = UIGraphicsGetCurrentContext();! // set the fill color! [[UIColor redColor] setFill];! // fill a rect! CGContextFillRect(ctx, rect);! } Square
None
[[UIColor redColor] setStroke];! CGContextSetLineWidth(ctx, 4);! CGContextStrokeRect(ctx, rect); Border
None
// draw border! [[UIColor greenColor] setStroke];! CGContextSetLineWidth(ctx, 4);! CGContextStrokeRect(ctx, rect);!
! // draw circle! [[UIColor redColor] setFill];! CGRect smaller = CGRectInset(rect, 20, 20);! CGContextFillEllipseInRect(ctx, smaller); Circle
None
CGContextSetShadowWithColor(ctx, CGSizeMake(5, 10), 5, [UIColor blackColor].CGColor);! ! [[UIColor redColor] setFill];!
CGRect smaller = CGRectInset(rect, 20, 20);! CGContextFillEllipseInRect(ctx, smaller); Shadow
None
[[UIColor redColor] setFill];! ! CGMutablePathRef path = CGPathCreateMutable();! CGPathMoveToPoint(path, NULL,
0, 0);! CGPathAddLineToPoint(path, NULL, rect.size.width, 0);! CGPathAddLineToPoint(path, NULL, rect.size.width / 2, rect.size.height);! CGContextAddPath(ctx, path);! ! CGContextFillPath(ctx); Path
None
// triangle drawing! [[UIColor whiteColor] setStroke];! {! CGContextSaveGState(ctx);! [[UIColor greenColor]
setFill];! [[UIColor blackColor] setStroke];! CGContextSetLineWidth(ctx, 4);! CGRect inner = CGRectInset(rect, 50, 50);! CGContextFillEllipseInRect(ctx, inner);! CGContextStrokeEllipseInRect(ctx, inner);! CGContextRestoreGState(ctx);! }! CGRect inner = CGRectInset(rect, 20, 20);! CGContextStrokeRect(ctx, inner); Layers
None
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();! CGFloat stops[] = {0, 1};! NSArray
*colors = @[! (id)[UIColor whiteColor].CGColor,! (id)[UIColor blackColor].CGColor,! ];! CGGradientRef gradient = CGGradientCreateWithColors(colorSpace,! (__bridge CFArrayRef)(colors),! stops);! CGContextDrawLinearGradient(ctx, gradient, rect.origin, CGPointMake(0, rect.size.height), 0); Gradient
None
CGContextFillEllipseInRect(ctx, rect);! CGPathRef path = CGPathCreateWithEllipseInRect(rect, NULL);! CGContextAddPath(ctx, path);! CGContextClip(ctx);!
! // gradient drawing Clipping
None
Real world
Background Shadow Clipped Gradient Border
Background Shadow Clipped Gradient Border
Background Shadow Clipped Gradient Border
Background Shadow Clipped Gradient Border
Background Shadow Clipped Gradient Border
Background Shadow Clipped Gradient Border
[demo]
github.com/rnystrom/M3Demo
Thanks. @_ryannystrom