Как нарисовать UIBezierPath, идентичный MKPolyline в UIView

Question

В настоящее время я отслеживаю свое местоположение на MKMapView. Моя цель - нарисовать путь безье, идентичный MKPolyline, созданный из отслеживаемых местоположений.

Произошла попытка сохранить все координаты местоположения в массиве CLLocation. Итерации по этому массиву и сохранение координат lat/lng в массиве CLLocationCoordinate2D. Затем убедитесь, что полилиния находится в представлении экрана, чтобы затем преобразовать все координаты местоположения в 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 
    } 
} 

Я могу вывести точки на консоль, которая хранится от обращенного (_ :) метод (не уверен, если они правильны). Тем не менее, на bezierPathView нет выхода, что приводит к созданию пустого белого контроллера фонового изображения.

Answer 1

Ваши расширения работают нормально. Проблема может быть в коде, который добавляет слой в представление (которое вы не показываете).

Я предлагаю вам упростить свой проект, например, использовать предопределенный массив точек, которые определенно подходят для вашего вида. Например, для представления, что в 500 пикселей в ширину и 300 пикселей в высоту, вы могли бы использовать что-то вроде:

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

использовать цвета, которые хорошо видны, как черный и желтый для обводки и заливки.

Убедитесь, что ваш путь корректно добавляется к представлению, например:

let path = UIBezierPath(points: points) 

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

view.layer.addSublayer(shapeLayer) 

Проверьте контроллер, который содержит представление в Interface Builder Xcode в. В функции зрения иерархии отладки: