如何在Swift上使用UIbezierPath进行通用的圆形绘制（使用lineDashPattern）

问题描述

我要制作一个通用的调谐器应用程序，但是当我尝试绘制模拟仪表时，它会在不同的设备上混乱。也许是非常硬编码的。检查此内容：

I'm about to make a universal Tuner app but when I try to draw an Analog meter it gets messed on different devices. Maybe it's very hardcoded.. Check this:

标签也位于同一UIView下。检查代码以绘制以下路径：

The labels are under the same UIView too. Check the code to draw these paths:

override func draw(_ rect: CGRect) {

    let center = CGPoint(x:bounds.width/2, y: bounds.height)

    var radius: CGFloat = max(bounds.width, bounds.height+50)

    // Define the thickness of the arc.
    let arcWidth: CGFloat = 1

    let startAngle: CGFloat = π
    let endAngle: CGFloat = 2 * π

    var path = UIBezierPath(arcCenter: center,
                            radius: radius/2 - arcWidth/2,
                            startAngle: startAngle,
                            endAngle: endAngle,
                            clockwise: true)

    path.lineWidth = arcWidth
    counterColor.setStroke()
    path.stroke()

    radius = max(bounds.width, bounds.height+70)

    path = UIBezierPath(arcCenter: center,
                            radius: radius/2 - arcWidth/2,
                            startAngle: startAngle,
                            endAngle: endAngle,
                            clockwise: true)

    let strokeColor            = UIColor.black.cgColor


    roundThinLayer.path             = path.cgPath
    roundThinLayer.strokeColor      = strokeColor
    roundThinLayer.lineWidth        = 16.0
    roundThinLayer.fillColor        = UIColor.clear.cgColor
    roundThinLayer.lineDashPattern  = [ 0.5, 4.55 ]
    //roundThinLayer.lineDashPhase    = 0.25

    self.layer.addSublayer(roundThinLayer)

    radius = max(bounds.width, bounds.height+90)

    path = UIBezierPath(arcCenter: center,
                        radius: radius/2 - arcWidth/2,
                        startAngle: startAngle,
                        endAngle: endAngle,
                        clockwise: true)

    roundThickLayer.path            = path.cgPath
    roundThickLayer.strokeColor     = strokeColor
    roundThickLayer.lineWidth       = 40
    roundThickLayer.fillColor       = UIColor.clear.cgColor
    roundThickLayer.lineDashPattern = [ 1.5, 140 ]
    roundThickLayer.lineDashPhase   = 0.25
    self.layer.addSublayer(roundThickLayer)
}

有人可以帮助我获得这些值而无需进行硬编码吗？即，我想像情节提要（在iPhone 7上运行）那样使细线/粗线破折号。我想使这个应用程序通用化。

Can someone help me get these values without hardcoding? i.e. I want to make the thins/thicks dashes as in the storyboard (that's running on an iPhone 7). I want to make this app universal.

注意：自动调整大小正确，对吧？

Note: The autoresizing is correctly, right?

预先感谢。

推荐答案

@Denis-是的，我认为您的硬编码值正在伤害您，尤其是对于lineDashPattern。

@Denis - yeah, I think your hard-coded values are hurting you, particularly for the lineDashPattern.

尝试一下。它使用线的长度（arc）和刻度的数量来计算lineDashPattern的间隙（可能需要对边界进行一些调整，诸如此类）。

Give this a try. It uses the length of the line (arc) and the number of ticks to calculate the "gaps" for the lineDashPattern (will likely need some tweaking for bounds and what-not)).

public override func draw(_ rect: CGRect) {

    let center = CGPoint(x:bounds.width/2, y: bounds.height)

    var radius: CGFloat = max(bounds.width, bounds.height+50)

    // Define the thickness of the arc.
    let arcWidth: CGFloat = 1

    let startAngle: CGFloat = CGFloat(M_PI) // π
    let endAngle: CGFloat = CGFloat(2 * M_PI) // π

    let counterColor = UIColor.red

    var path = UIBezierPath(arcCenter: center,
                            radius: radius/2 - arcWidth/2,
                            startAngle: startAngle,
                            endAngle: endAngle,
                            clockwise: true)

    path.lineWidth = arcWidth
    counterColor.setStroke()
    path.stroke()


    // init vars for later use
    var nTicks = 0
    var tickWidth = 0.0
    var gapWidth = 0.0


    radius += 20

    path = UIBezierPath(arcCenter: center,
                        radius: radius/2 - arcWidth/2,
                        startAngle: startAngle,
                        endAngle: endAngle,
                        clockwise: true)

    let strokeColor            = UIColor.black.cgColor

    let roundThinLayer = CAShapeLayer()

    // number of short ticks to draw
    nTicks = 150

    // thickness of short ticks
    tickWidth = 0.5

    // calculate the gap between ticks
    gapWidth = ((M_PI * Double(radius) / 2) - (tickWidth * Double(nTicks))) / Double(nTicks - 1)

    roundThinLayer.path             = path.cgPath
    roundThinLayer.strokeColor      = strokeColor
    roundThinLayer.lineWidth        = 20.0
    roundThinLayer.fillColor        = UIColor.clear.cgColor
    roundThinLayer.lineDashPattern  = [ tickWidth as NSNumber, gapWidth as NSNumber ]
    roundThinLayer.lineDashPhase    = CGFloat(tickWidth / Double(2))


    self.layer.addSublayer(roundThinLayer)


    radius += 20

    path = UIBezierPath(arcCenter: center,
                        radius: radius/2 - arcWidth/2,
                        startAngle: startAngle,
                        endAngle: endAngle,
                        clockwise: true)

    let roundThickLayer = CAShapeLayer()


    // number of tall ticks to draw
    nTicks = 7

    // thickness of tall ticks
    tickWidth = 1.5

    // calculate the gap between ticks
    gapWidth = ((M_PI * Double(radius) / 2) - (tickWidth * Double(nTicks))) / Double(nTicks - 1)

    roundThickLayer.path            = path.cgPath
    roundThickLayer.strokeColor     = strokeColor
    roundThickLayer.lineWidth       = 40
    roundThickLayer.fillColor       = UIColor.clear.cgColor
    roundThickLayer.lineDashPattern = [ tickWidth as NSNumber, gapWidth as NSNumber ]
    roundThickLayer.lineDashPhase   = CGFloat(tickWidth / Double(2))
    self.layer.addSublayer(roundThickLayer)

    self.clipsToBounds = true


}

这篇关于如何在Swift上使用UIbezierPath进行通用的圆形绘制（使用lineDashPattern）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！