iphone - 如何在MKMapView上用MKOverlayView绘制圆弧/曲线

Question

现在需要帮助。我可以用MKPolyline和MKPolylineView画线，但是如何在MKMapView上的两个坐标之间画弧线或曲线呢？非常感谢。

Answer 1

在回答问题之前，重要的是要提到 MKOverlayView已弃用，从 iOS7 开始我们应该使用 MKOverlayRenderer :

In iOS 7 and later, use the MKOverlayRenderer class to display overlays instead.

我们现在可以分解如何实现圆弧/曲线:

1. 首先，我们需要定义并添加折线。让我们用 2 个坐标创建一个:

let polyline = MKPolyline(coordinates: coordinates, count: coordinates.count)
mapView.addOverlay(polyline)

1. 添加多段线后，MKMapView 需要我们提供一个合适的 MKOverlayRenderer 对应于我们在第 1 部分创建的 MKPolyline . method我们需要的是:

mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer

基本上:

Asks the delegate for a renderer object to use when drawing the specified overlay.

1. 那么让我们提供那个对象。我们将要对 MKOverlayPathRenderer 进行子类化，它显然继承自 MKOverlayRenderer 并且如文档所述:

Use this renderer when your overlay's shape is defined by a CGPath object. By default, this renderer fills the overlay's shape and represents the strokes of the path using its current attributes.

因此，如果我们按原样使用新的子类对象，我们将得到一个开箱即用的解决方案，它是从我们在第 1 节中定义的第一个坐标到第二个坐标的实线，但是由于我们想要一条曲线，我们必须为此覆盖一个方法:

You can use this class as-is or subclass to define additional drawing behaviors. If you subclass, override the createPath() method and use that method to build the appropriate path object. To change the path, invalidate it and recreate the path using whatever new data your subclass has obtained.

这意味着在我们的 CustomObject: MKOverlayPathRenderer 中，我们将覆盖 createPath:

override func createPath() {
 let polyline = overlay as! MKPolyline
 // Getting the coordinates from the polyline
 let points = polyline.points()
 // Taking the center of the polyline (between the 2 coordiantes) and converting to CGPoint
 let centerMapPoint = MKMapPoint(polyline.coordinate)
 // Converting coordinates to CGPoint corresponding to the specified point on the map
 let startPoint = point(for: points[0])
 let endPoint = point(for: points[1])
 let centerPoint = point(for: centerMapPoint)

 // I would like to thank a co-worker of mine for the controlPoint formula :)
 let controlPoint = CGPoint(x: centerPoint.x + (startPoint.y - endPoint.y) / 3,
                            y: centerPoint.y + (endPoint.x - startPoint.x) / 3)

 // Defining our new curved path using Bezier path
 let myPath = UIBezierPath()
 myPath.move(to: startPoint)
 myPath.addQuadCurve(to: endPoint,
                     controlPoint: controlPoint)
 // Mutates the solid line with our curved one
 path = myPath.cgPath
}

我们基本上完成了。您可能需要考虑添加宽度/描边/颜色等，这样您可以看到曲线。

1. (可选)如果您对渐变曲线感兴趣，有一个非常好的解决方案 here但是您必须在代码中进行 2 处更改才能使其正常工作:

4.1。覆盖 override func draw(_ mapRect: MKMapRect, zoomScale: MKZoomScale, in context: CGContext) 之后，就在添加渐变之前，您必须添加第 3 节中的相同代码，但不要更改内部 path 您必须将其添加到提供的上下文中:

context.move(to: startPoint)
context.addQuadCurve(to: endPoint,
                     control: controlPoint)

这基本上为我们提供了有关渐变着色所需的曲线。

4.2。我们需要使用 path.boundingBox 而不是使用 path.boundingBoxOfPath 因为:

... including control points for Bézier and quadratic curves.

不同于boundingBoxOfPath:

... not including control points for Bézier and quadratic curves.

希望对您有所帮助:)