How to make a tip balloon with bottom arrow in iOS?

Question

Hi I am create tip ballon on UIview . My code is here which I implemented on UIView .

static const CGFloat HEIGHTOFPOPUPTRIANGLE = 20.0f;
static const CGFloat WIDTHOFPOPUPTRIANGLE = 40.0f;
static const CGFloat borderRadius = 8.0f;
static const CGFloat strokeWidth = 3.0f; 

 CGContextRef context = UIGraphicsGetCurrentContext();
//  CGContextTranslateCTM(context, 0.0f, self.bounds.size.height);
//  CGContextScaleCTM(context, 1.0f, -1.0f);

 CGRect currentFrame = self.bounds;

CGContextSetLineJoin(context, kCGLineJoinRound);
CGContextSetLineWidth(context, strokeWidth);
CGContextSetStrokeColorWithColor(context, [[UIColor redColor] CGColor]);
CGContextSetFillColorWithColor(context, [[UIColor yellowColor] CGColor]);

// Draw and fill the bubble

CGContextBeginPath(context);
CGContextMoveToPoint(context, borderRadius + strokeWidth + 0.5f, strokeWidth + HEIGHTOFPOPUPTRIANGLE + 0.5f);
CGContextAddLineToPoint(context, round(currentFrame.size.width / 2.0f - WIDTHOFPOPUPTRIANGLE / 2.0f) + 0.5f, HEIGHTOFPOPUPTRIANGLE + strokeWidth + 0.5f);
CGContextAddLineToPoint(context, round(currentFrame.size.width / 2.0f) + 0.5f, strokeWidth + 0.5f);
CGContextAddLineToPoint(context, round(currentFrame.size.width / 2.0f + WIDTHOFPOPUPTRIANGLE / 2.0f) + 0.5f, HEIGHTOFPOPUPTRIANGLE + strokeWidth + 0.5f);
CGContextAddArcToPoint(context, currentFrame.size.width - strokeWidth - 0.5f, strokeWidth + HEIGHTOFPOPUPTRIANGLE + 0.5f, currentFrame.size.width - strokeWidth - 0.5f, currentFrame.size.height - strokeWidth - 0.5f, borderRadius - strokeWidth);
CGContextAddArcToPoint(context, currentFrame.size.width - strokeWidth - 0.5f, currentFrame.size.height - strokeWidth - 0.5f, round(currentFrame.size.width / 2.0f + WIDTHOFPOPUPTRIANGLE / 2.0f) - strokeWidth + 0.5f, currentFrame.size.height - strokeWidth - 0.5f, borderRadius - strokeWidth);
CGContextAddArcToPoint(context, strokeWidth + 0.5f, currentFrame.size.height - strokeWidth - 0.5f, strokeWidth + 0.5f, HEIGHTOFPOPUPTRIANGLE + strokeWidth + 0.5f, borderRadius - strokeWidth);
CGContextAddArcToPoint(context, strokeWidth + 0.5f, strokeWidth + HEIGHTOFPOPUPTRIANGLE + 0.5f, currentFrame.size.width - strokeWidth - 0.5f, HEIGHTOFPOPUPTRIANGLE + strokeWidth + 0.5f, borderRadius - strokeWidth);
CGContextClosePath(context);
CGContextDrawPath(context, kCGPathFillStroke);

Using this code my tip balloon created this kind of

.... enter image description here

but I want to arrow bottom not on top, please ignore text written in tip ballon UIView . Focus only red border . SO for create arrow on bottom so I have uncommented above two lines ....

     CGContextTranslateCTM(context, 0.0f, self.bounds.size.height);
     CGContextScaleCTM(context, 1.0f, -1.0f);

Through to this I have created tip ballon with bottom arrow but problem is here all the contents like text in my tip ballon UIView rotate Like this image ....

enter image description here

I want to this tip ballon with bottom arrow but with write contents like right manner text etc . So please tell me any solution ,I'm really thankful to you. basically I am follow this link.

How to draw a "speech bubble" on an iPhone?

score 1 · Accepted Answer · answered Apr 27 '15 at 20:48

Your text looks flipped because by changing the transformation matrix you are changing the coordinate system for the whole context, including the text. You can preserve your drawing environment by saving its state and restoring it, preventing it from affecting other drawing operations.

So before changing the CTM, you can call CGContextSaveGState(context) and after you're done with drawing the bubble call CGContextRestoreGState(context). If you draw the text after the graphic state is restored it should appear "normal".

How to make a tip balloon with bottom arrow in iOS?

1 Answers1