setLineDash在Swift 2/3中对称

时间:2016-07-27 20:18:44

标签: swift core-graphics uibezierpath

我正在开发一个互联网速度测试应用程序。我会做些什么来练习和了解未来项目的更多信息。

这是我的Swift代码:

import UIKit

@IBDesignable
class Arc: UIView {

   @IBInspectable var dashWidth: CGFloat = 12.0
   @IBInspectable var smallDashWidth: CGFloat = 5.0

   override func draw(_ rect: CGRect) {
       // Position and Radius of Arc
       let center = CGPoint(x: bounds.width / 2, y: bounds.height / 2)

       // Calculate Angles
       let π = CGFloat(M_PI)
       let startAngle = 3 * π / 4
       let endAngle = π / 4
       let radius = max(bounds.width / 1.15, bounds.height / 1.15) / 2 - dashWidth / 2

       // Start Context
       let context = UIGraphicsGetCurrentContext()


       // MARK: Base
       let arc = UIBezierPath(arcCenter: center, radius: radius,startAngle: startAngle,endAngle: endAngle,clockwise: true)
       arc.addArc(withCenter: center, radius: radius, startAngle: endAngle, endAngle: startAngle, clockwise: false)
       arc.lineJoinStyle = .bevel
       arc.lineCapStyle = .round
       arc.close()
       UIColor.yellow().setStroke()
       arc.lineWidth = smallDashWidth
       //context!.saveGState()
       context!.setLineDash(phase: 0, lengths: [0, 0], count: 2)
       arc.stroke()
       context!.saveGState()


       // MARK: dash Arc
       let dashArc = UIBezierPath()
       dashArc.addArc(withCenter: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)

       // Round Line
       dashArc.lineJoinStyle = .round;

       // Set Stroke and Width of Dash
       UIColor.white().setStroke()
       dashArc.lineWidth = dashWidth

       // Save Context and Set Line Dash
       context!.saveGState()
       context!.setLineDash(phase: 0, lengths: [2, 54], count: 2)

       // Draw Line
       dashArc.stroke()

       // Restore Context
       context!.restoreGState()
   }

}

结果如下:

enter image description here

我需要做什么:

我需要自动化这行代码:

context!.setLineDash(phase: 0, lengths: [2, 54], count: 2)

长度为[2,54]这些数字是在没有计算的情况下添加的,只是为了获得动态获得的最终方程数。 1:需要在弧上添加破折号12(后面可能会更改,被指定为变量)。弧以可变角度开始和结束(可能稍后改变)。 2:dashArc.lineWidth = dashWidth的值也可以改变,是计算12个破折号之间空间的重要项目。 3:由于所有变量呈现的值都可以变量,这是进行此计算的最佳方式。 4:第一个和最后一个破折号应该与相应的startAngle和endAngle处于相同的角度。

我需要什么:

我需要一个能够在弧线期间尽可能对称地观察和展开虚线的计算。

我想到了类似的计算:

var numberOfDashes = 12
var perimeterArc = ?
var widthDash = 2

spacing = (perimeterArc - (widthDash * numberOfDashes)) / numberOfDashes

context!.setLineDash(phase: 0, lengths: [widthDash, spacing], count: 2)

但我不知道如何计算perimeterArc。 有人能帮我吗?我无法想到在Swift 2/3中为此创建逻辑计算。

我感谢任何提示。

1 个答案:

答案 0 :(得分:3)

首先,不要试图通过尝试使用破折号模式来直接计算空间,而是考虑角度。

我提取了一些最初在我的书PostScript By Example(第281页)中创建的代码。我将postscript代码音译为Swift(版本2,因为版本3似乎无法做任何有用的事情)。

我还避免使用UIBezierPath并访问图形上下文,因为我觉得两者之间存在一些奇怪的交互。 UIBezierPath旨在管理图形上下文。

以下是代码:

class  ComputeDashes : UIView

{

让insetAmount:CGFloat = 40.0

let  numberOfDashes: Int     = 16
let  startAngle:     CGFloat = CGFloat(1.0 * M_PI / 4.0)
let  endAngle:       CGFloat = CGFloat(3.0 * M_PI / 4.0)
let  subtendedAngle: CGFloat = CGFloat(2.0 * M_PI) - CGFloat(2.0 * M_PI / 4.0)

override init(frame: CGRect) {
    super.init(frame: frame)
}

required init(coder: NSCoder) {
    super.init(coder: coder)!
}

override func drawRect(rect: CGRect)
{
    let  insets: UIEdgeInsets = UIEdgeInsetsMake(insetAmount, insetAmount, insetAmount, insetAmount)
    let  newbounds: CGRect = UIEdgeInsetsInsetRect(self.bounds, insets)

    let  centre: CGPoint = CGPointMake(CGRectGetMidX(newbounds), CGRectGetMidY(newbounds))
    let  radius: CGFloat = CGRectGetWidth(newbounds) / 2.0

    let  context: CGContext = UIGraphicsGetCurrentContext()!

    CGContextAddArc(context, centre.x, centre.y, radius, startAngle, endAngle, 1)

    CGContextSetLineWidth(context, 10.0)
    UIColor.magentaColor().set()
    CGContextStrokePath(context)

    //    MARK:  paint dashes

    let  innerRadius: CGFloat = radius * 0.75
    CGContextSaveGState(context)
    CGContextTranslateCTM(context, centre.x, centre.y)

    let  angle = subtendedAngle / CGFloat(numberOfDashes)
    CGContextRotateCTM(context, endAngle)
    for rot in 0...numberOfDashes {
        let  innerPoint: CGPoint = CGPointMake(innerRadius, 0.0)
        CGContextMoveToPoint(context, innerPoint.x, innerPoint.y)
        let  outerPoint: CGPoint = CGPointMake(radius, 0.0)
        CGContextAddLineToPoint(context, outerPoint.x, outerPoint.y)
        CGContextRotateCTM(context, angle)
    }
    CGContextSetLineWidth(context, 2.0)
    UIColor.blackColor().set()
    CGContextStrokePath(context)
    CGContextRestoreGState(context)
}

}

我相信这种方法更加灵活,并且避免了为了解释“' on”中的线宽而需要进行的棘手计算。破折号模式的阶段。

我希望这会有所帮助。让我知道你的想法。