虚线圆圈中笔划属性“Dash”的计算 - Swift

Question

我正在开发一个应用程序。我还没有完成 Swift 2.2/3.0 的学徒期，我正在寻找一些答案。

第一： 我正在使用 PaintCode 来生成 Swift 代码的开始。我绘制了具有以下属性的绘图：

代码 Swift：

func drawSpeedView(strokeGap strokeGap: CGFloat = 30, strokeDash: CGFloat = 4, strokePhase: CGFloat = 0, strokeWidth: CGFloat = 31, strokeStartAngle: CGFloat = 225, strokeEndAngle: CGFloat = 315) {
    //// General Declarations
    let context = UIGraphicsGetCurrentContext()

    //// DashedLarge Drawing
    let dashedLargeRect = CGRect(x: 14.5, y: 17.5, width: 291, height: 291)
    let dashedLargePath = UIBezierPath()
    dashedLargePath.addArcWithCenter(CGPoint(x: dashedLargeRect.midX, y: dashedLargeRect.midY), radius: dashedLargeRect.width / 2, startAngle: -strokeStartAngle * CGFloat(M_PI)/180, endAngle: -strokeEndAngle * CGFloat(M_PI)/180, clockwise: true)

    UIColor.blackColor().setStroke()
    dashedLargePath.lineWidth = strokeWidth
    CGContextSaveGState(context)
    CGContextSetLineDash(context, strokePhase, [strokeDash, strokeGap], 2)
    dashedLargePath.stroke()
    CGContextRestoreGState(context)
}

我的问题： 此代码针对 iPhone 5 进行了优化。 对于虚线数字的比例，我需要为 iPhone 6/6s 和 6+/6s+ 创建strokeDash 的值

我需要什么： 我还没有知识库来进行圆周计算。

我需要计算替换行：

CGContextSetLineDash(context, strokePhase, [strokeDash, strokeGap], 2)

用一个十进制数替换，无论圆的周长如何，都能在圆周围加上 12/6/15 虚线。

有人能解决我的问题吗？

我从哪里开始？

Answer 1

iPhone 5 问题

正如您从该行中看到的（来自您的代码 sn-p）：

let dashedLargeRect = CGRect(x: 14.5, y: 17.5, width: 291, height: 291)

绘图空间由宽度 291 点和高度 291 点定义。

硬编码这些数字是一个糟糕的想法，因为正如您所注意到的，这意味着代码只能在某些设备上运行良好，而在其他设备上则不行。

要解决此问题，您可以通过声明以下函数来动态获取这些分辨率：

func windowHeight() -> CGFloat {
      return UIScreen.mainScreen().applicationFrame.size.height
}

func windowWidth() -> CGFloat {
    return UIScreen.mainScreen().applicationFrame.size.width
}

然后你可以创建dashedLargeRect 例如：

let dashedLargeRect = CGRect(x: 14.5, y: 17.5, width: windowWidth()-20, height: windowHeight()-20)

通过这种方式，您可以使您的代码与设备无关，这始终是一种很好的做法。 （请注意我没有触及CGRect“起源”，又名x,y参数，请考虑你的功课:)）。

第二期

如果我理解正确，您想知道如何绘制虚线。

秘密就在眼前

dashedLargePath.addArcWithCenter(CGPoint(x: dashedLargeRect.midX, y: dashedLargeRect.midY), radius: dashedLargeRect.width / 2, startAngle: -strokeStartAngle * CGFloat(M_PI)/180, endAngle: -strokeEndAngle * CGFloat(M_PI)/180, clockwise: true)

你可以看addArcWithCenter文档here，我为你简化一下：

let arcCenter = CGPoint(x: dashedLargeRect.midX, y: dashedLargeRect.midY)
let radius = dashedLargeRect.width / 2
let startAngle = -strokeStartAngle * CGFloat(M_PI)/180
let endAngle = -strokeEndAngle * CGFloat(M_PI)/180

dashedLargePath.addArcWithCenter(arcCenter, 
                                 radius: radius, 
                                 startAngle: startAngle, 
                                 endAngle: endAngle, 
                                 clockwise: true)

现在应该更清楚这段代码的作用了，如果你想在这段代码上画另一条线（例如显示车速、风速、气压等），你所要做的就是调用具有更小/更大半径的类似函数，并且可能使用不同的线条样式（也就是更改 CGContextSetLineDash、dashedLargePath.lineWidth 和 UIColor.blackColor().setStroke() 线条）。