2

I am having issues drawing sharp and smooth graphics.

This is what I have:

CGRect photoIconRect = CGRectMake(0, 0, 48, 48);
CAShapeLayer* photoIconLayer = [CAShapeLayer layer];
photoIconLayer.frame = photoIconRect;

UIBezierPath* photoIconPath = UIBezierPath.bezierPath;
[photoIconPath moveToPoint: CGPointMake(32.5, 32)];
[photoIconPath addLineToPoint: CGPointMake(15.5, 32)];
[photoIconPath addCurveToPoint: CGPointMake(14, 30.5) controlPoint1: CGPointMake(14.67, 32) controlPoint2: CGPointMake(14, 31.33)];
[photoIconPath addLineToPoint: CGPointMake(14, 20.5)];
[photoIconPath addCurveToPoint: CGPointMake(15.5, 19) controlPoint1: CGPointMake(14, 19.67) controlPoint2: CGPointMake(14.67, 19)];
[photoIconPath addCurveToPoint: CGPointMake(18, 19) controlPoint1: CGPointMake(15.5, 19) controlPoint2: CGPointMake(16, 19)];
[photoIconPath addCurveToPoint: CGPointMake(21, 16) controlPoint1: CGPointMake(20, 19) controlPoint2: CGPointMake(19, 16)];
[photoIconPath addCurveToPoint: CGPointMake(23, 16) controlPoint1: CGPointMake(23, 16) controlPoint2: CGPointMake(23, 16)];
[photoIconPath addLineToPoint: CGPointMake(25, 16)];
[photoIconPath addCurveToPoint: CGPointMake(27, 16) controlPoint1: CGPointMake(25, 16) controlPoint2: CGPointMake(25, 16)];
[photoIconPath addCurveToPoint: CGPointMake(30, 19) controlPoint1: CGPointMake(29, 16) controlPoint2: CGPointMake(28, 19)];
[photoIconPath addCurveToPoint: CGPointMake(32.5, 19) controlPoint1: CGPointMake(32, 19) controlPoint2: CGPointMake(32.5, 19)];
[photoIconPath addCurveToPoint: CGPointMake(34, 20.5) controlPoint1: CGPointMake(33.33, 19) controlPoint2: CGPointMake(34, 19.67)];
[photoIconPath addLineToPoint: CGPointMake(34, 30.5)];
[photoIconPath addCurveToPoint: CGPointMake(32.5, 32) controlPoint1: CGPointMake(34, 31.33) controlPoint2: CGPointMake(33.33, 32)];
[photoIconPath closePath];
[photoIconPath moveToPoint: CGPointMake(24, 20)];
[photoIconPath addCurveToPoint: CGPointMake(19, 25) controlPoint1: CGPointMake(21.24, 20) controlPoint2: CGPointMake(19, 22.24)];
[photoIconPath addCurveToPoint: CGPointMake(24, 30) controlPoint1: CGPointMake(19, 27.76) controlPoint2: CGPointMake(21.24, 30)];
[photoIconPath addCurveToPoint: CGPointMake(29, 25) controlPoint1: CGPointMake(26.76, 30) controlPoint2: CGPointMake(29, 27.76)];
[photoIconPath addCurveToPoint: CGPointMake(24, 20) controlPoint1: CGPointMake(29, 22.24) controlPoint2: CGPointMake(26.76, 20)];
[photoIconPath closePath];
[photoIconPath moveToPoint: CGPointMake(24, 29)];
[photoIconPath addCurveToPoint: CGPointMake(20, 25) controlPoint1: CGPointMake(21.79, 29) controlPoint2: CGPointMake(20, 27.21)];
[photoIconPath addCurveToPoint: CGPointMake(24, 21) controlPoint1: CGPointMake(20, 22.79) controlPoint2: CGPointMake(21.79, 21)];
[photoIconPath addCurveToPoint: CGPointMake(28, 25) controlPoint1: CGPointMake(26.21, 21) controlPoint2: CGPointMake(28, 22.79)];
[photoIconPath addCurveToPoint: CGPointMake(24, 29) controlPoint1: CGPointMake(28, 27.21) controlPoint2: CGPointMake(26.21, 29)];
[photoIconPath closePath];

[photoIconPath setFlatness: 0.40];
[photoIconLayer setPath: photoIconPath.CGPath];
[photoIconLayer setBackgroundColor:[UIColor colorWithRed: 0 green: 0.5 blue: 1 alpha: 1].CGColor];
[photoIconLayer setFillColor:[UIColor colorWithRed: 1 green: 0.8 blue: 0.133 alpha: 1].CGColor];
[sentView.layer addSublayer:photoIconLayer];

photoIconLayer.masksToBounds = YES;
photoIconLayer.needsDisplayOnBoundsChange = NO;
photoIconLayer.contentsScale = 2.0 * [[UIScreen mainScreen] scale];
photoIconLayer.rasterizationScale = 2.0 * [UIScreen mainScreen].scale;
photoIconLayer.shouldRasterize = YES;

and It produces this:

enter image description here

Even though it doesn't look bad on here, on a retina device, there is actual jaggedness visible around the lens ring. I compare this with other high end apps that has smooth graphics and I definitely feel like I am missing something.

Thanks in advance.

Gizmodo
  • 3,151
  • 7
  • 45
  • 92
  • 1
    I see you using `-[UIBezierPath fill]`, which draws to a graphics context, but I don't see how you create the graphics context. I also see you create a `CAShapeLayer`, but I don't see you set the layer's path or add it to a superlayer. Please update your question to include these details. – rob mayoff Sep 22 '14 at 23:12
  • You are not missing anything. That code is inside a method called "-(void) drawCameraIcon : (UIView *) sentView; sentView is a UIButton in this case. – Gizmodo Sep 23 '14 at 01:37
  • Sorry. I didn't notice the scroll bar. Anyway, what calls `drawCameraIcon:`? What sets up the graphics context? – rob mayoff Sep 23 '14 at 01:51
  • My main view controller calls this within it self. I use this way to draw icons and change icons. I don''t have a graphic context specified at all. – Gizmodo Sep 23 '14 at 01:56
  • 1
    Do you get a warning like `: CGContextSaveGState: invalid context 0x0.` in the console? – rob mayoff Sep 23 '14 at 02:10
  • I did actually. As soon I took the [photoIconPath fill]; line out, warning went away and the icon still looks fine, except wish it was smoother and sharper.. – Gizmodo Sep 23 '14 at 02:25

0 Answers0