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绘制弧型测量图

回答

相关问题