如何基于CGRect居中绘制地图聚合标注的数字？

当前使用Swift实现地图聚合标注数字绘制时，单数字可正常显示在圆形标注内，但两位数会超出圆形范围。以下是修改后的代码，实现数字基于标注图片自动居中显示：

修改后的核心代码 #

调整辅助函数textToImage #

移除固定的位置参数，改为自动计算文字居中坐标：

func textToImage(drawText text: String, inImage image: UIImage) -> UIImage {
    let textColor = UIColor.white
    let textFont = UIFont(name: "Helvetica Bold", size: 12)!

    let scale = UIScreen.main.scale
    UIGraphicsBeginImageContextWithOptions(image.size, false, scale)

    let textFontAttributes: [NSAttributedString.Key: Any] = [
        .font: textFont,
        .foregroundColor: textColor
    ]
    
    // 绘制背景标注图片
    image.draw(in: CGRect(origin: .zero, size: image.size))
    
    // 计算文字实际占用尺寸
    let textSize = text.size(withAttributes: textFontAttributes)
    // 计算文字居中位置：图片中心偏移文字自身中心
    let textX = (image.size.width - textSize.width) / 2
    let textY = (image.size.height - textSize.height) / 2
    
    // 基于居中坐标绘制文字
    text.draw(at: CGPoint(x: textX, y: textY), withAttributes: textFontAttributes)

    let newImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return newImage!
}

修改调用逻辑 #

不再传入固定位置参数，直接使用调整后的函数：

let number = cluster.memberAnnotations.count
displayPriority = .defaultHigh
let baseImage = UIImage(named: "map-pin-full-cluster-1")!
    .withTintColor(.blue, renderingMode: .alwaysTemplate)
    .resizeWith(newSize: CGSize(width: 35, height: 35))
image = textToImage(drawText: "\(number)", inImage: baseImage)

关键改动说明 #

• 移除原函数的atPoint参数，通过计算图片与文字的尺寸差值，自动生成居中坐标，适配不同位数的数字
• 使用text.size(withAttributes:)获取文字实际占用的精确尺寸，避免固定位置导致的偏移或超出
• 用draw(at:)替代原有的draw(in:)，直接基于计算出的坐标绘制文字，精准控制显示位置

这样无论数字是1位、2位甚至更多位，都会自动居中显示在圆形标注内，不会超出范围。

内容的提问来源于stack exchange，提问作者SLE