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
AHC041解説
terryu16
0
590
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
技術を根付かせる / How to make technology take root
kubode
1
240
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
182
22k
Docker and Python
trallard
44
3.3k
The Language of Interfaces
destraynor
156
24k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Statistics for Hackers
jakevdp
797
220k
Why Our Code Smells
bkeepers
PRO
335
57k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
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