如何在UIView中绘制与MKPolyline相同的UIBezierPath [英] How to draw UIBezierPath identical to MKPolyline in a UIView

问题描述

目前我在MKMapView上跟踪我的位置。我的目标是绘制一条与从跟踪位置创建的MKPolyline相同的bezier路径。

Currently I am tracking my location on an MKMapView. My objective is to draw a bezier path identical to an MKPolyline created from tracked locations.

我的尝试是：将所有位置坐标存储在CLLocation数组中。迭代该数组并将lat / lng坐标存储在CLLocationCoordinate2D数组中。然后确保折线位于屏幕视图中，然后转换CGPoints中的所有位置坐标。

What I have attempted is: Store all location coordinates in a CLLocation array. Iterate over that array and store the lat/lng coordinates in a CLLocationCoordinate2D array. Then ensure the polyline is in the view of the screen to then convert all the location coordinates in CGPoints.

当前尝试：

@IBOutlet weak var bezierPathView: UIView! 

var locations = [CLLocation]() // values from didUpdateLocation(_:)

func createBezierPath() {
    bezierPathView.isHidden = false

        var coordinates = [CLLocationCoordinate2D]()
        for location in locations {
            coordinates.append(location.coordinate)
        }

        let polyline = MKPolyline(coordinates: coordinates, count: coordinates.count)
        fitPolylineInView(polyline: polyline)

        let mapPoints = polyline.points()

        var points = [CGPoint]()

        for point in 0...polyline.pointCount
        {
            let coordinate = MKCoordinateForMapPoint(mapPoints[point])
            points.append(mapView.convert(coordinate, toPointTo: polylineView))
        }

        print(points)

        let path = UIBezierPath(points: points)
        path.lineWidth = 2.0
        path.lineJoinStyle = .round

        let layer = CAShapeLayer(path: path, lineColor: UIColor.red, fillColor: UIColor.black)
        bezierPathView.layer.addSublayer(layer)
}

extension UIBezierPath {
    convenience init(points:[CGPoint])
    {
        self.init()

        //connect every points by line.
        //the first point is start point
        for (index,aPoint) in points.enumerated()
        {
            if index == 0 {
                self.move(to: aPoint)
            }
            else {
                self.addLine(to: aPoint)
            }
        }
    }
}

extension CAShapeLayer
{
    convenience init(path:UIBezierPath, lineColor:UIColor, fillColor:UIColor)
    {
        self.init()
        self.path = path.cgPath
        self.strokeColor = lineColor.cgColor
        self.fillColor = fillColor.cgColor
        self.lineWidth = path.lineWidth

        self.opacity = 1
        self.frame = path.bounds
    }
}

我能够将这些点输出到从convert（_ :)方法存储的控制台（不确定它们是否正确）。然而bezierPathView上没有输出 - 导致空白的背景视图控制器。

I am able to output the points to the console that stored from the convert(_:) method( not sure if they are correct ). Yet the there is not output on the bezierPathView-resulting in an empty-white background-view controller.

推荐答案

你的扩展工作正常。问题可能出在将图层添加到视图的代码中（您没有显示）。

Your extensions work fine. The problem may be in the code that adds the layer to the view (which you do not show).

我建议您简化项目，例如使用预定义的点数组，绝对适合您的视图。例如，对于500像素宽和300像素高的视图，您可以使用以下内容：

I'd suggest that you simplify your project, for example use predefined array of points that definitely fit to your view. For example, for a view that is 500 pixels wide and 300 pixels high, you could use something like:

let points = [
    CGPoint(x: 10, y: 10),
    CGPoint(x: 490, y: 10),
    CGPoint(x: 490, y: 290),
    CGPoint(x: 10, y: 290),
    CGPoint(x: 10, y: 10)
]

使用清晰可见的颜色，如黑色和黄色，用于笔划和填充。

Use colors that are clearly visible, like black and yellow for your stroke and fill.

确保您的路径已正确添加到视图中，例如：

Make sure that your path is correctly added to the view, for example:

let path = UIBezierPath(points: points)

let shapeLayer = CAShapeLayer(path: path, lineColor: UIColor.blue, fillColor: UIColor.lightGray)

view.layer.addSublayer(shapeLayer)

在Xcode的Interface Builder中检查包含视图的控​​制器。在调试视图层次结构功能中：

Inspect the controller that contains the view in Xcode's Interface Builder. In the debug view hierarchy function:

这篇关于如何在UIView中绘制与MKPolyline相同的UIBezierPath的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！