Drawing with Code

Drawing with Code - presented at M3 Conf (http://m3conf.com) 2013

Transcript

1. Drawing with Code @_ryannystrom
2. QuartzCore.framework
5. Runs on CPU Runs on GPU
6. Geometry
7. MYView
8. MYView
9. MYView
11. (0, 0)
12. (0, 0) (width, height)
13. struct CGPoint {! CGFloat x;! CGFloat y;! };! typedef struct CGPoint CGPoint;
14. struct CGSize {! CGFloat width;! CGFloat height;! };! typedef struct CGSize CGSize;
15. struct CGRect {! CGPoint origin;! CGSize size;! };! typedef struct CGRect CGRect;
16. UIView *view = [[UIView alloc] init];! view.frame = CGRectMake(0, 0, 200, 150);
17. UIView *view = [[UIView alloc] init];! view.frame = {0, 0, 200, 150};
18. 480 320 (0, 0) (200, 150)
19. 480 320 (0, 0) (200, 150)
20. Drawing
21. @interface MYView : UIView! // public properties + methods! @end
22. @implementation MYView! ! - (void)drawRect:(CGRect)rect {! // draw here! }! ! @end
23. - (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
25. [[UIColor redColor] setStroke];! CGContextSetLineWidth(ctx, 4);! CGContextStrokeRect(ctx, rect); Border
27. // 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
29. CGContextSetShadowWithColor(ctx, CGSizeMake(5, 10), 5, [UIColor blackColor].CGColor);! ! [[UIColor redColor] setFill];! CGRect smaller = CGRectInset(rect, 20, 20);! CGContextFillEllipseInRect(ctx, smaller); Shadow
31. [[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
33. // 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
35. 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
37. CGContextFillEllipseInRect(ctx, rect);! CGPathRef path = CGPathCreateWithEllipseInRect(rect, NULL);! CGContextAddPath(ctx, path);! CGContextClip(ctx);! ! // gradient drawing Clipping
39. Real world
40. Background Shadow Clipped Gradient Border
41. Background Shadow Clipped Gradient Border
42. Background Shadow Clipped Gradient Border
43. Background Shadow Clipped Gradient Border
44. Background Shadow Clipped Gradient Border
45. Background Shadow Clipped Gradient Border
46. [demo]
47. github.com/rnystrom/M3Demo
48. Thanks. @_ryannystrom