Question

我之前使用谷歌地图工具库在谷歌地图中绘制气泡图标，现在我想为iOS做同样的事情

bubble icons

https://developers.google.com/maps/documentation/android/utility/

我在iOS https://github.com/googlemaps/google-maps-ios-utils

中找到了此广告连播

是否有人用它来创建气泡图标，如果有，我如何为iOS创建气泡图标？

Answer 1

不幸的是，IOS没有这样的实用程序。我需要类似的解决方案，所以下面提供了它。

下面的函数绘制左箭头并返回UIImage。请注意，只能使用路径来绘制箭头。另外，也可以使用资产中的预创建图像来代替始终创建或重复使用图像。

func drawArrow() ->UIImage {

    //the color of the arrow
    let color = UIColor.yellow

    // First create empty image choose the size according to your need.
    let width = 84
    let height = 24

    let size = CGSize( width: width, height: height)

    //let image: UIImage = makeEmptyImage(size: size)

    let rectangle = CGRect(x: 12, y: 0, width: 72, height: 24)

    UIGraphicsBeginImageContextWithOptions( size,  false,  0.0)
    let context = UIGraphicsGetCurrentContext()

    //clear the background
    context?.clear(CGRect(x: 0, y: 0, width: width, height: height))

    //draw the rectangle
    context?.addRect(rectangle)
    context?.setFillColor(color.cgColor)
    context?.fill(rectangle)

    //draw the triangle
    context?.beginPath()
    context?.move(   to: CGPoint(x : 12 ,y :  0) )
    context?.addLine(to: CGPoint(x :  0, y : 12) )
    context?.addLine(to: CGPoint(x : 12, y : 24) )
    context?.closePath()

    context?.setFillColor(color.cgColor)
    context?.fillPath()

    // get the image
    let image2 = UIGraphicsGetImageFromCurrentImageContext()!

    UIGraphicsEndImageContext()

    return image2
}

下一个功能是拍摄图像并在其上绘制文本。

func drawText(text:NSString, inImage:UIImage) -> UIImage? {

    let font = UIFont.systemFont(ofSize: 11)
    let color = UIColor.black
    let style : NSMutableParagraphStyle = NSMutableParagraphStyle.default.mutableCopy() as! NSMutableParagraphStyle
    style.alignment = .center

    let attributes:NSDictionary = [ NSAttributedString.Key.font :               font,
                                    NSAttributedString.Key.paragraphStyle :     style,
                                    NSAttributedString.Key.foregroundColor :    color
    ]

    let myInsets = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 0)
    let newImage = inImage.resizableImage(withCapInsets: myInsets)

    print("rect.width \(inImage.size.width) rect.height \(inImage.size.height)")


    let textSize = text.size(withAttributes: attributes as? [NSAttributedString.Key : Any] )

    let textRect = CGRect(x: 10, y: 5, width: textSize.width, height: textSize.height)

    UIGraphicsBeginImageContextWithOptions(CGSize(width: textSize.width + 20, height: textSize.height + 10), false, 0.0)

    newImage.draw(in: CGRect(x: 0, y: 0, width: textSize.width + 20 , height: textSize.height + 10))

    text.draw(in: textRect.integral, withAttributes: attributes as? [NSAttributedString.Key : Any]  )

    let resultImage = UIGraphicsGetImageFromCurrentImageContext()

    UIGraphicsEndImageContext()

    return resultImage
}

所以我们可以像使用它

marker.icon = drawText(text: eLoc.name as NSString, inImage: drawArrow() )

marker.groundAnchor = CGPoint(x: 0, y: 0.5)

//If you need some rotation          
//let degrees = CLLocationDegrees(exactly: 90.0)
//marker.rotation = degrees!

groundAnchor移动标记图标的位置，请参见此anwser。使用度数，您可以旋转箭头。

注意：不幸的是，IOS不支持9补丁图像。因此，并非所有气泡图标工厂都可以通过使用resizableImage进行编程，请参见此漂亮的web site和此answer

示例输出为；

Answer 2

您是否查看了Google地图ios sdk的自定义图标documentation？这是一个好的开始。

iOS中谷歌地图的气泡图标工厂

2 个答案: