2015-09-05 20 views
6

Próbuję narysować kompas przy użyciu UIBezierPath i dodając kreski do linii, aby zaznaczyć kierunek północny, południowy, wschód, zachód i punkty pośrednie. Linie kresek wydają się przesunięte (nie są wyrównane), szczególnie w kierunkach północnym i południowym, a sposób, w jaki robię, wydaje się dodawać kreskę, gdy ścieżka się zamyka.Jak dopasowywać kreski Koła UIBezierPath

let windCircleOrigin = CGPoint(x: self.center.x * 1.3, y: self.bounds.height/2.0 - 10) 
let windCircleRadius = CGFloat(self.bounds.height * 0.3) 
let windCirclePath: UIBezierPath = UIBezierPath(arcCenter: windCircleOrigin, radius: windCircleRadius,startAngle: 0, endAngle: CGFloat(M_PI) * 2.0, clockwise: true) 
     windCirclePath.lineWidth = 6 
let dashes: [CGFloat] = [windCirclePath.lineWidth * 0, windCirclePath.lineWidth * 3 ] 
     windCirclePath.setLineDash(dashes, count: dashes.count 
      , phase: 0.0) 
UIColor.whiteColor().setFill() 
UIColor.whiteColor().setStroke() 
windCirclePath.stroke() 
textView(self.windSpeedLabel! + " mph", x: windCircleOrigin.x - 20.0, y: windCircleOrigin.y - 8.0, color: UIColor.whiteColor(), width: 50.0, height: 20.0) 
textView("N", x: windCircleOrigin.x - 7.0, y: windCircleOrigin.y - 70.0, color: UIColor.whiteColor(), width: 20, height: 20) 
textView("S", x: windCircleOrigin.x - 7.0, y: windCircleOrigin.y + 50.0, color: UIColor.whiteColor(), width: 20, height: 20) 
textView("W", x: windCircleOrigin.x - 70.0, y: windCircleOrigin.y - 8.0, color: UIColor.whiteColor(), width: 20, height: 20) 
textView("E", x: windCircleOrigin.x + 60.0, y: windCircleOrigin.y - 8.0, color: UIColor.whiteColor(), width: 20, height: 20) 

func textView(text: String, x: CGFloat, y: CGFloat, color: UIColor, width: CGFloat, height: CGFloat) { 
    let textView = UILabel(frame: CGRectMake(x, y, width, height)) 
    textView.textAlignment = NSTextAlignment.Left 
    textView.textColor = color 
    textView.backgroundColor = UIColor.clearColor() 
    textView.font = UIFont(name: "HelveticaNeue-Light", size: 12.0) 
    textView.text = text 
    self.addSubview(textView) 
} 

enter image description here

Without Dashes

+1

Polecam rysowanie każdego tikku osobno jako linii promienistej, zamiast próbować użyć jednej obwodowej linii przerywanej. – jtbandes

+0

Czy możesz pokazać wynik startAngle: 0, endAngle: CGFloat (M_PI), ...? – Shoaib

+0

@Shoaib masz na myśli bez kresek? – wxcoder

Odpowiedz

5

Zamiast tego, polecam rysunek każdy tick indywidualnie. Wtedy możesz łatwo kontrolować swoją lokalizację.

coś takiego:

let path = UIBezierPath() 
let innerRadius: CGFloat = 50 
let outerRadius: CGFloat = 60 
let numTicks = 24 

for i in 0..<numTicks { 
    let angle = CGFloat(i) * CGFloat(2*M_PI)/CGFloat(numTicks) 
    let inner = CGPoint(x: innerRadius * cos(angle), y: innerRadius * sin(angle)) 
    let outer = CGPoint(x: outerRadius * cos(angle), y: outerRadius * sin(angle)) 
    path.moveToPoint(inner) 
    path.addLineToPoint(outer) 
} 

Następnie można udar ta ścieżka z jakiegokolwiek linewidth (i lineCapStyle) chcesz.

+2

Miałem zamiar polecić to samo (głosowano). –

+0

Aby sterować punktem środkowym, możesz użyć 'addArcWithCenter'? W tej chwili jest to środek w lewym górnym rogu mojego widoku. – wxcoder

+1

addArcWithCenter jest dla linii zakrzywionych. Te znaczniki są liniami prostymi. Możesz wyregulować centrum, przesuwając wartości 'x' i' y'. – jtbandes