Created
October 5, 2015 16:41
-
-
Save eoghain/7ff46e9f98173b4c0a8c to your computer and use it in GitHub Desktop.
Draw Circle Image w/Border - IBDesignable so it's live in IB
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#import <UIKit/UIKit.h> | |
IB_DESIGNABLE | |
@interface CircleImageVIew : UIView | |
@property (assign) IBInspectable BOOL showFrame; | |
@property (nonatomic, strong) IBInspectable UIImage *image; | |
@property (nonatomic, strong) IBInspectable UIColor *borderColor; | |
@property (nonatomic, strong) IBInspectable UIColor *borderStrokeColor; | |
@property (nonatomic, assign) IBInspectable CGFloat borderWidth; | |
@property (nonatomic, strong) IBInspectable UIColor *frameBackgroundColor; | |
@end |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#import "CircleImageView.h" | |
#import <QuartzCore/QuartzCore.h> | |
@interface CircleImageView () | |
@end | |
@implementation CircleImageView | |
- (void)showFrame:(BOOL)showFrame | |
{ | |
_showFrame = showFrame; | |
[self setNeedsDisplay]; | |
} | |
- (void)setImage:(UIImage *)image | |
{ | |
_image = image; | |
[self setNeedsDisplay]; | |
} | |
- (void)setBorderColor:(UIColor *)borderColor | |
{ | |
_borderColor = borderColor; | |
[self setNeedsDisplay]; | |
} | |
- (void)setBorderStrokeColor:(UIColor *)borderStrokeColor | |
{ | |
_borderStrokeColor = borderStrokeColor; | |
[self setNeedsDisplay]; | |
} | |
- (void)setBorderWidth:(CGFloat)borderWidth | |
{ | |
_borderWidth = borderWidth; | |
[self setNeedsDisplay]; | |
} | |
- (void)setFrameBackgroundColor:(UIColor *)frameBackgroundColor | |
{ | |
_frameBackgroundColor = frameBackgroundColor; | |
[self setNeedsDisplay]; | |
} | |
#pragma mark - Object Lifecycle | |
- (void)setup | |
{ | |
self.showFrame = YES; | |
self.borderColor = [UIColor whiteColor]; | |
self.borderStrokeColor = [UIColor blackColor]; | |
self.borderWidth = 5.f; | |
self.backgroundColor = [UIColor clearColor]; | |
} | |
- (id)init | |
{ | |
return [self initWithFrame:CGRectMake(0, 0, 128.f, 128.f)]; | |
} | |
- (id)initWithCoder:(NSCoder *)aDecoder | |
{ | |
self = [super initWithCoder:aDecoder]; | |
if (self) | |
{ | |
[self setup]; | |
} | |
return self; | |
} | |
- (id)initWithFrame:(CGRect)frame | |
{ | |
self = [super initWithFrame:frame]; | |
if (self) | |
{ | |
[self setup]; | |
} | |
return self; | |
} | |
#pragma mark - Drawing | |
- (void)drawRect:(CGRect)rect | |
{ | |
CGFloat scale = [UIScreen mainScreen].scale; | |
CGContextRef ctx = UIGraphicsGetCurrentContext(); | |
CGContextSaveGState(ctx); | |
// Create masking context | |
CGColorSpaceRef maskColorSpace = CGColorSpaceCreateDeviceGray(); | |
CGContextRef imageMaskContext = CGBitmapContextCreate(NULL, | |
rect.size.width, | |
rect.size.height, | |
8, | |
rect.size.width, | |
maskColorSpace, | |
0); | |
// Setting up mask as not masking just incase frame is off | |
CGColorSpaceRelease(maskColorSpace); | |
CGContextSetFillColorWithColor(imageMaskContext, [UIColor whiteColor].CGColor); | |
CGContextFillRect(imageMaskContext, rect); | |
if (self.showFrame) | |
{ | |
// Image Frame | |
CGContextSetLineWidth(ctx, 1.0 * scale); | |
CGContextSetStrokeColorWithColor(ctx, self.borderStrokeColor.CGColor); | |
CGContextSetFillColorWithColor(ctx, self.borderColor.CGColor); | |
CGRect circleRect = CGRectMake( 0, 0, rect.size.width, rect.size.height ); | |
circleRect = CGRectInset(circleRect, 1, 1); | |
CGContextFillEllipseInRect(ctx, circleRect); | |
CGContextStrokeEllipseInRect(ctx, circleRect); | |
CGContextSetStrokeColorWithColor(ctx, self.borderStrokeColor.CGColor); | |
CGContextSetFillColorWithColor(ctx, self.frameBackgroundColor.CGColor); | |
circleRect = CGRectInset(circleRect, self.borderWidth, self.borderWidth); | |
CGContextFillEllipseInRect(ctx, circleRect); | |
CGContextStrokeEllipseInRect(ctx, circleRect); | |
// End Image Frame | |
// Create main mask shape | |
CGContextSetFillColorWithColor(imageMaskContext, [UIColor blackColor].CGColor); | |
CGContextFillRect(imageMaskContext, rect); | |
CGContextSetFillColorWithColor(imageMaskContext, [UIColor whiteColor].CGColor); | |
CGContextFillEllipseInRect(imageMaskContext, circleRect); | |
} | |
// Draw Image | |
CGImageRef imageMask = CGBitmapContextCreateImage(imageMaskContext); | |
CGContextTranslateCTM(ctx, 0, rect.size.height); | |
CGContextScaleCTM(ctx, 1.0, -1.0); // flip image right side up | |
CGImageRef imageRef = CGImageCreateWithMask(self.image.CGImage, imageMask); | |
CGContextDrawImage(ctx, rect, imageRef); | |
CGContextClipToMask(ctx, self.bounds, imageMask); | |
CGImageRelease(imageRef); | |
CGImageRelease(imageMask); | |
CGContextRelease(imageMaskContext); | |
// End Draw Image | |
CGContextRestoreGState(ctx); | |
UIGraphicsEndImageContext(); | |
} | |
@end |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment