2015-09-05 16 views
6

Sto provando a disegnare una bussola utilizzando UIBezierPath e aggiungendo dei trattini alla linea per contrassegnare le direzioni Nord, Sud, Est, Ovest e i punti intermedi. I trattini sembrano sfalsati (non sono allineati), in particolare nelle direzioni Nord e Sud e il modo in cui sto facendo sembra aggiungere un trattino in più quando il percorso si sta chiudendo.Come allineare i trattini del cerchio di 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

Suggerirei di tracciare ciascun segno di spunta separatamente come una linea radiale, piuttosto che provare a utilizzare una linea tratteggiata circonferenziale. – jtbandes

+0

Puoi mostrare il risultato di startAngle: 0, endAngle: CGFloat (M_PI), ...? – Shoaib

+0

@Shoaib intendi senza i trattini? – wxcoder

risposta

5

invece, consiglio disegnare ogni tick singolarmente. Quindi puoi facilmente controllare la loro posizione.

Qualcosa di simile a questo:

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

Poi si può accarezzare questo percorso con qualsiasi lineWidth (e lineCapStyle) che si desidera.

+2

Stavo per raccomandare la stessa cosa (Votato). –

+0

Per controllare il punto centrale puoi usare 'addArcWithCenter'? In questo momento è al centro nell'angolo in alto a sinistra della mia vista. – wxcoder

+1

addArcWithCenter è per linee curve. Questi segni di spunta sono linee rette. Puoi regolare il centro spostando i valori 'x' e' y'. – jtbandes