UIView繪製弧型測量圖

我有一個圖表，它有一個測量儀的形狀，它有多個設計元素（見附件）。我正在努力的關鍵部分實際上是用虛線得到一個體面的弧形。UIView繪製弧型測量圖

到目前爲止，我不確定是否應該關閉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 - 我敢肯定，一旦我得到這個我將能夠鍛鍊漸變和動畫:)

任何幫助，將不勝感激:)

來源

2016-05-16 sukh

你需要的是用不同的劃線寬度的兩個貝塞爾路徑。

你可以從這裏開始：

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

同樣，你可以按照弧線，在這裏你只需要同樣的方法用bezierPathWithArcCenter方法代替bezierPathWithOval方法

請注意：

CGFloat ovalPattern[] = {2, 1}; // 2是短跑寬度和1是破折號

差距您可以精確地調整這些值！

來源

2016-05-17 15:38:03

這實際上很聰明。我不知道我會想到它。 –

你可以使用繪圖工具在貝塞爾路徑上做很多組合！你可以試試看！@GlennHowes –

哇謝謝@TejaNandamuri - 給你一個贊成的投票！將檢查一個月如果這工作:) – sukh

這是目前我能做的最好的翻譯成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)

編輯：增加了對更短，更頻繁的短線第二弧。

來源

2016-05-17 15:39:43 ZGski

UIView繪製弧型測量圖

回答

相關問題