Created
April 5, 2017 14:23
-
-
Save dodikk/d574dae04d675452e641c03536065d06 to your computer and use it in GitHub Desktop.
A chat round rect bubble with triangle on top left or top right.
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
// | |
// BubbleView1.m | |
// ChatBubbleGuiPrototype | |
// | |
// Created by Alexander Dodatko on 4/5/17. | |
// Copyright © 2017 monspace. All rights reserved. | |
// | |
#import "BubbleView1.h" | |
@implementation BubbleView1 | |
- (void)drawRect:(CGRect)rect | |
{ | |
// copy-pasted from SO. Replaced some code to make compiler happy. | |
// http://stackoverflow.com/questions/11196112/speech-bubble-in-ios-sdk-using-objective-c | |
static const CGFloat LINE_WIDTH = 2.f; | |
CGContextRef context = UIGraphicsGetCurrentContext(); | |
CGContextSetLineWidth(context, 2.f); | |
UIColor* strokeColor = [UIColor colorWithRed: 0xFD / 255.f | |
green: 0xD6 / 255.f | |
blue: 0xCC / 255.f | |
alpha: 1.f]; | |
CGContextSetStrokeColorWithColor(context, strokeColor.CGColor); | |
CGContextSetRGBFillColor(context, 1, 1, 1, 1); | |
rect.origin.y += LINE_WIDTH; | |
rect.size.width -= LINE_WIDTH * 2; | |
rect.size.height -= LINE_WIDTH * 2; | |
CGFloat radius = self.cornerRadius; | |
CGFloat minx = CGRectGetMinX(rect), | |
midx = CGRectGetMidX(rect), | |
maxx = CGRectGetMaxX(rect); | |
CGFloat miny = CGRectGetMinY(rect), | |
midy = CGRectGetMidY(rect), | |
maxy = CGRectGetMaxY(rect); | |
CGMutablePathRef outlinePath = CGPathCreateMutable(); | |
static const CGFloat TRIANGLE_HEIGHT = 16; | |
const CGFloat TRIANGLE_MID_Y = miny + 2 * TRIANGLE_HEIGHT; | |
if (self.isTriangleLeft) | |
{ | |
minx += TRIANGLE_HEIGHT; | |
// top mid | |
CGPathMoveToPoint(outlinePath, nil, midx, miny); | |
// top mid ==> top right ==> mid right ==> ... | |
CGPathAddArcToPoint (outlinePath, nil, maxx , miny, maxx, midy, radius); | |
// mid right ==> bottom right ==> bottom mid ==> ... | |
CGPathAddArcToPoint (outlinePath, nil, maxx , maxy, midx, maxy, radius); | |
// bottom mid ==> bottom left ==> mid left ==> ... | |
CGPathAddArcToPoint (outlinePath, nil, minx , maxy, minx, midy, radius); | |
// draw left triangle | |
// | |
CGPathAddLineToPoint(outlinePath, nil, minx , TRIANGLE_MID_Y + TRIANGLE_HEIGHT); | |
CGPathAddLineToPoint(outlinePath, nil, minx - TRIANGLE_HEIGHT, TRIANGLE_MID_Y ); | |
CGPathAddLineToPoint(outlinePath, nil, minx , TRIANGLE_MID_Y - TRIANGLE_HEIGHT); | |
// mid left (after triangle) ==> top left ==> top mid | |
CGPathAddArcToPoint (outlinePath, nil, minx, miny, midx, miny, radius); | |
} | |
else | |
{ | |
minx += TRIANGLE_HEIGHT; | |
maxx -= TRIANGLE_HEIGHT; | |
// top mid | |
CGPathMoveToPoint(outlinePath, nil, midx, miny); | |
// top mid ==> top left ==> mid left ==> ... | |
CGPathAddArcToPoint (outlinePath, nil, minx, miny, minx, midy, radius); | |
// mid left ==> bottom left ==> bottom mid ==> ... | |
CGPathAddArcToPoint (outlinePath, nil, minx, maxy, midx, maxy, radius); | |
// bottom mid ==> bottom right ==> mid right ==> ... | |
CGPathAddArcToPoint (outlinePath, nil, maxx, maxy, maxx, midy, radius); | |
// draw right triangle | |
// | |
CGPathAddLineToPoint(outlinePath, nil, maxx, miny + TRIANGLE_MID_Y + TRIANGLE_HEIGHT); | |
CGPathAddLineToPoint(outlinePath, nil, maxx + TRIANGLE_HEIGHT, miny + TRIANGLE_MID_Y); | |
CGPathAddLineToPoint(outlinePath, nil, maxx, miny + TRIANGLE_MID_Y - TRIANGLE_HEIGHT); | |
// mid right ==> top right ==> tom mid | |
CGPathAddArcToPoint (outlinePath, nil, maxx, miny, midx, miny, radius); | |
} | |
CGPathCloseSubpath(outlinePath); | |
CGContextAddPath(context, outlinePath); | |
static const CGFloat SHADOW_BLUR = 8; | |
// http://stackoverflow.com/questions/10024543/draw-lines-with-glow-effect-in-ipad-app | |
// | |
//Set the shadow in your graphics context to have a zero size offset, a blur of around 6-10 (change according to taste) and the same colour as your stroke colour. This will give all subsequent drawing a glow effect. The command is | |
// | |
// | |
CGContextSetShadowWithColor(context, CGSizeMake(0, 0), SHADOW_BLUR, strokeColor.CGColor); | |
CGContextFillPath(context); | |
CGContextStrokePath(context); | |
CGContextAddPath(context, outlinePath); | |
CGContextClip(context); | |
CGContextDrawPath(context, kCGPathFillStroke); | |
} | |
@end |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Credits to the SO topic