UIViewアーク型ゲージチャートを描画

Question

私はそれに複数の設計要素を持つゲージの形をしたチャートを持っています（添付を参照）。私が苦労している重要な部分は、本当に点線でまともな円弧の形をしています。

これまでのところ、Core Graphicsルートを使用するか、UIKit内の何か、つまりUIBezierPathを使用する必要があるかどうかはわかりません。

私は私の破線を与えるが、アーク自体は十分にかなり良いではないのUIViewを拡張するクラス内でこれを試してみた：

class Example: UIView { 

    override func drawRect(rect: CGRect) { 

     let context = UIGraphicsGetCurrentContext() 
     CGContextSetLineWidth(context, 10.0) 
     CGContextSetStrokeColorWithColor(context, UIColor.greenColor().CGColor) 
     let dashArray:[CGFloat] = [1,10, 0, 0] 
     CGContextSetLineDash(context, 2, dashArray, 4) 
     CGContextMoveToPoint(context, 10, 200) 
     CGContextAddQuadCurveToPoint(context, 0, 0, 100, 200) 
     CGContextStrokePath(context) 
    } 
} 

が、これは使用して軌道に乗るためにいくつかの他の方法は、あります。 UIBezierPathしかし、私はここに破線を適用するとどのように行くのか分かりません...

破線で円弧を得るための主要な基盤は私の主な目標ですatm - 私はこれを取得したら確信しています私はグラデーションとアニメーションを練習することができます:)

任意の助けいただければ幸い:)

Answer 1

が必要なもの異なるダッシュ幅を持つ2つのベジェパスです。

はここから起動することができ

：

T0が高いダッシュベジエ取得：

UIBezierPath* oval2Path = [UIBezierPath bezierPathWithOvalInRect: yourRect]; 
[UIColor.redColor setStroke]; 
oval2Path.lineWidth = 13; 
CGFloat oval2Pattern[] = {2, 20}; 
[oval2Path setLineDash: oval2Pattern count: 2 phase: 0]; 
[oval2Path stroke]; 

を、小さなダッシュパターン化ベジエを取得するには、あなたはダッシュの間のギャップを縮小する必要があります。

UIBezierPath* ovalPath = [UIBezierPath bezierPathWithOvalInRect: yourRect]; 
[UIColor.redColor setStroke]; 
ovalPath.lineWidth = 6; 
CGFloat ovalPattern[] = {2, 1}; 
[ovalPath setLineDash: ovalPattern count: 2 phase: 0]; 
[ovalPath stroke]; 

と今は一緒にこれら二つのベジェパスを置くことができます。

- (void)drawFrame: (CGRect)frame 
{ 

    // Oval Drawing 
    UIBezierPath* ovalPath = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(CGRectGetMinX(frame), CGRectGetMinY(frame), 70, 70)]; 
    [UIColor.redColor setStroke]; 
    ovalPath.lineWidth = 6; 
    CGFloat ovalPattern[] = {2, 1}; 
    [ovalPath setLineDash: ovalPattern count: 2 phase: 0]; 
    [ovalPath stroke]; 


    // Oval 2 Drawing 
    UIBezierPath* oval2Path = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(CGRectGetMinX(frame) + 0.5, CGRectGetMinY(frame) - 0.5, 70, 70)]; 
    [UIColor.redColor setStroke]; 
    oval2Path.lineWidth = 13; 
    CGFloat oval2Pattern[] = {2, 20}; 
    [oval2Path setLineDash: oval2Pattern count: 2 phase: 0]; 
    [oval2Path stroke]; 
} 

スウィフト：あなただけの必要な場所

func drawCanvas1(frame frame: CGRect = CGRect(x: 86, y: 26, width: 70, height: 70)) { 
    let context = UIGraphicsGetCurrentContext() 

    // Oval Drawing 
    let ovalPath = UIBezierPath(ovalInRect: CGRect(x: frame.minX, y: frame.minY, width: 70, height: 70)) 
    UIColor.redColor().setStroke() 
    ovalPath.lineWidth = 6 
    CGContextSaveGState(context) 
    CGContextSetLineDash(context, 4.5, [0, 1], 2) 
    ovalPath.stroke() 
    CGContextRestoreGState(context) 


    // Oval 2 Drawing 
    let oval2Path = UIBezierPath(ovalInRect: CGRect(x: frame.minX + 0.5, y: frame.minY - 0.5, width: 70, height: 70)) 
    UIColor.redColor().setStroke() 
    oval2Path.lineWidth = 13 
    CGContextSaveGState(context) 
    CGContextSetLineDash(context, 39, [1, 10], 2) 
    oval2Path.stroke() 
    CGContextRestoreGState(context) 
} 

同様にあなたは、弧のために同じアプローチに従うことができますbezierPathWithOvalメソッドをbezierPathWithArcCenterメソッドに置き換える方法

はその点に注意してください。

CGFloat ovalPattern[] = {2, 1}; // 2は、ダッシュ幅と1であるダッシュ

の間のギャップであるあなたは、精度のために、これらの値を調整することができます！

Answer 2

これは現在、これをUIBezierPathに翻訳するためにできる最高の方法です。これを行うためのより良い方法を見つけると、コードを更新します。

// First Arc // 
guageArcOne.path = UIBezierPath(arcCenter: centerPoint, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true).CGPath 
guageArcOne.fillColor = UIColor.clearColor().CGColor 
guageArcOne.strokeColor = UIColor.greenColor().CGColor 
guageArcOne.lineWidth = 10.0 
guageArcOne.strokeEnd = 1.0 
guageArcOne.lineDashPattern = [1,10, 0, 0] 
guageArcOne.lineDashPhase = 2.0 
arcContainerView.layer.addSublayer(guageArcOne) 

// Second Arc // 
guageArcTwo.path = UIBezierPath(arcCenter: centerPoint, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true).CGPath 
guageArcTwo.fillColor = UIColor.clearColor().CGColor 
guageArcTwo.strokeColor = UIColor.greenColor().CGColor 
guageArcTwo.lineWidth = 10.0 
guageArcTwo.strokeEnd = 1.0 
guageArcTwo.lineDashPattern = [1,2, 0, 0] 
guageArcTwo.lineDashPhase = 2.0 
arcContainerView.layer.addSublayer(guageArcTwo) 

EDIT：が短く、より頻繁なダッシュのために第二の円弧を追加しました。