MKPolyline to UIBezierPath

šŸŽ¤ General Discussion Swift
1

Good evening!

I am currently trying to convert an MKPolyline to a UIBezierPath and draw it on a UIView.
I am able to get the points required however that Bezier path is not getting drawn onto the UIView. Any suggestions super appreciated!

    func fitPolyline() 
    {
    	polylineView.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)
        polylineView.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
	    }
	}

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




@IBOutlet weak var bezierPathView: UIView! 

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

func createBezierPath() {
    var coordinates = [CLLocationCoordinate2D]()

    for location in locations {
        coordinates.append(location.coordinate)
    }

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

    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))
    }

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

    let layer = CAShapeLayer(path: path, lineColor: UIColor.blue, fillColor: UIColor.black)
    bezierPathView.layer.addSublayer(layer) // Nothing appears on the UIView
}

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
    }
}
1 Like
2

Hi Elliott,

Iā€™m interested in accomplishing a similar task. Just wondering if you ever solved this or not. If not I can take a look with a fresh pair of eyes. In my case, I just want to add a cgpath below the polyline so that as the polyline disappears, the cgpath is revealed. Would appreciate any insights and experience you could share.

Tom