Skip to content

Instantly share code, notes, and snippets.

@dodikk
Created April 5, 2017 14:23
Show Gist options
  • Save dodikk/d574dae04d675452e641c03536065d06 to your computer and use it in GitHub Desktop.
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.
//
// 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
@dodikk
Copy link
Author

dodikk commented Apr 5, 2017

Credits to the SO topic

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment