ios - 如何在 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 rotate Like this image ....

我想要这个带底部箭头的提示气球，但要写正确的方式文本等内容。 所以请告诉我任何解决方案，我真的很感谢你。基本上我是点击这个链接。

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

Answer 1

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

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