ios - 复杂图像(气泡/图钉)和 [UIImage resizableImageWithCapInsets :]

Question

我正在尝试创建下图的可调整大小版本(40x28，底部的小三角形应水平居中):

UIEdgeInsets imageInsets = UIEdgeInsetsMake(4.0f, 4.0f, 8.0f, 4.0f);
UIImage *pinImage = [[UIImage imageNamed:@"map_pin"] resizableImageWithCapInsets:imageInsets];                                                                       

根据 documentation ，这种简单的方法将不起作用，因为我的三角形落入可调整大小的区域(固定高度但可缩放宽度):

这将导致与 this 中描述的问题相同非常相似的 SO 后 - 重复(平铺)三角形。但不幸的是，他们的解决方案不适用于我的特殊情况，因为从可缩放区域中排除三角形会导致其错位并且由于明显的原因它不会水平居中。

所以我想知道...是否有可能使用 [UIImage resizableImageWithCapInsets:] 方法实现我的目标？还是我应该尝试其他方法，例如在代码中绘制所有内容？

基本上，我想从 Google Maps SDK 中实现信息窗口之类的东西:

Answer 1

您可以通过使用 UIBezierPath 来实现。下面的代码在 swift 中，但您应该能够在 Objective-C 中实现同样的事情

而不是用直线开始代码:

path.moveToPoint(CGPoint(x: 300, y: 0))

我改为从弧线开始(右上角):

path.addArcWithCenter(CGPoint(x: 300-10, y: 50), radius: 10 , startAngle: 0 , endAngle: CGFloat(M_PI/2)  , clockwise: true) //1st rounded corner

通过这样做，我得到了四个圆角，我只需要在之前的代码末尾添加一条直线:

path.closePath()  

这是代码和截图:

let path = UIBezierPath()
path.addArcWithCenter(CGPoint(x: 300-10, y: 50), radius: 10 , startAngle: 0 , endAngle: CGFloat(M_PI/2)  , clockwise: true) //1st rounded corner
path.addArcWithCenter(CGPoint(x: 200, y: 50), radius:10, startAngle: CGFloat(2 * M_PI / 3), endAngle:CGFloat(M_PI) , clockwise: true)// 2rd rounded corner
path.addArcWithCenter(CGPoint(x: 200, y: 10), radius:10, startAngle: CGFloat(M_PI), endAngle:CGFloat(3 * M_PI / 2), clockwise: true)// 3rd rounded corner
// little triangle
path.addLineToPoint(CGPoint(x:240 , y:0))
path.addLineToPoint(CGPoint(x: 245, y: -10))
path.addLineToPoint(CGPoint(x:250, y: 0))
path.addArcWithCenter(CGPoint(x: 290, y: 10), radius: 10, startAngle: CGFloat(3 * M_PI / 2), endAngle: CGFloat(2 * M_PI ), clockwise: true)
path.addLineToPoint(CGPoint(x:300 , y:50))
path.closePath()