2015-09-05 6 views
6

मैं UIBezierPath का उपयोग करके एक कंपास खींचने और उत्तर, दक्षिण, पूर्व, पश्चिम दिशाओं और बिंदुओं को चिह्नित करने के लिए लाइन में डैश जोड़ने की कोशिश कर रहा हूं। डैश ऑफसेट (वे गठबंधन नहीं होते हैं), खासकर उत्तर और दक्षिण दिशाओं में और जिस तरह से मैं कर रहा हूं, ऐसा लगता है कि पथ बंद होने पर अतिरिक्त डैश जोड़ना प्रतीत होता है।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

मैं एक परिधीय धराशायी रेखा का उपयोग करने की कोशिश करने के बजाय प्रत्येक टिक को रेडियल लाइन के रूप में अलग-अलग चित्रित करने की अनुशंसा करता हूं। – jtbandes

+0

क्या आप startAngle: 0, endAngle: CGFloat (M_PI), ... के परिणाम दिखा सकते हैं? – Shoaib

+0

@ शोएब आप डैश के बिना मतलब है? UI12ezierPaths का उपयोग कर – wxcoder

उत्तर

5

इसके बजाय, मैं ड्राइंग प्रत्येक व्यक्तिगत रूप से टिक की सिफारिश करेंगे। फिर आप आसानी से अपने स्थान को नियंत्रित कर सकते हैं।

कुछ इस तरह:

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

तो आप कर सकते हैं स्ट्रोक जो कुछ linewidth (और lineCapStyle) वाले इस मार्ग।

+2

मैं एक ही चीज़ (वोटित) की सिफारिश करने जा रहा था। –

+0

केंद्र बिंदु को नियंत्रित करने के लिए आप 'addArcWithCenter' का उपयोग कर सकते हैं? अभी यह मेरे विचार के ऊपरी बाएं कोने पर केंद्र है। – wxcoder

+1

addArcWithCenter घुमावदार लाइनों के लिए है। ये टिक अंक सीधे रेखाएं हैं। आप 'x' और' y' मानों को स्थानांतरित करके केंद्र को समायोजित कर सकते हैं। – jtbandes

संबंधित मुद्दे