So zeichnen Sie UIBezierPath identisch mit MKPolyline in einer UIView

Question

Momentan verfolge ich meinen Standort auf einem MKMapView. Mein Ziel ist es, einen Bezier-Pfad zu erstellen, der mit einem MKPolyline identisch ist, der aus nachverfolgten Orten erstellt wurde.

Was ich versucht habe, ist: Speichern Sie alle Standortkoordinaten in einem CLLocation-Array. Iterieren Sie über dieses Array und speichern Sie die Koordinaten in einem CLLocationCoordinate2D-Array. Stellen Sie dann sicher, dass die Polylinie in der Ansicht des Bildschirms ist, um dann alle Standortkoordinaten in CGPoints zu konvertieren.

Aktuelle Versuch:

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

Ich bin in der Lage der Punkte auf die Konsole ausgegeben, die aus dem convert gespeichert (_ :) Methode (nicht sicher, ob sie korrekt sind). Das Ergebnis wird jedoch nicht im BezierPathView ausgegeben, was zu einem leer-weißen Hintergrund-View-Controller führt.

Answer 1

Ihre Erweiterungen funktionieren einwandfrei. Das Problem liegt möglicherweise im Code, der die Ebene zur Ansicht hinzufügt (die Sie nicht anzeigen).

Ich würde vorschlagen, dass Sie Ihr Projekt vereinfachen, z. B. vordefinierte Punkte, die definitiv zu Ihrer Ansicht passen. Zum Beispiel für eine Ansicht, die 500 Pixel breit und 300 Pixel hoch ist, könnten Sie so etwas wie zu verwenden:

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

Verwenden Sie Farben, die deutlich sichtbar, wie schwarz und gelb für Schlaganfall und füllen sind.

Stellen Sie sicher, dass Ihr Weg richtig zu der Ansicht hinzugefügt wird, zum Beispiel:

let path = UIBezierPath(points: points) 

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

view.layer.addSublayer(shapeLayer) 

den Controller Überprüfen Sie, dass die Ansicht in Xcode Interface Builder enthält. In der Debug-Funktion Ansicht Hierarchie: