如何在iOS中制作带有底部箭头的尖端气球？

Question

您好我在UIview上创建了提示气球。我的代码在这里，我在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);

使用此代码，我的提示气球创建了这种

...

但是我想箭头底部不在顶部，请忽略用尖端气球UIView写的文字。只聚焦红色边框。因此我可以在底部创建箭头，所以我在两行之上取消注释....

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

通过这个我已经创建了带有底部箭头的尖端气球，但问题在这里所有的内容，如我的提示气球UIView中的文字旋转像这样的图像....

我希望这个尖端气球带有底部箭头，但写作内容如正确的方式文本等。   所以请告诉我任何解决方案，我真的很感谢你。基本上我跟着这个链接。

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

Answer 1

您的文字看起来翻转，因为通过更改变换矩阵，您正在更改整个上下文的坐标系，包括文本。 您可以通过保存其状态并恢复它来保护您的绘图环境，防止它影响其他绘图操作。

因此，在更改CTM之前，您可以致电CGContextSaveGState(context)并在完成绘制气泡调用CGContextRestoreGState(context)之后。如果在图形状态恢复后绘制文本，它应显示为“正常”。