swift 上的虚线变得奇怪

Question

我正在尝试在 UIView 中绘制一些虚线，但我不知道我是否做对了。第一个破折号与其他破折号相比只有一半宽度。

代码：

    let strokeColor                      = UIColor.white.cgColor
    let path = UIBezierPath()
    path2.move(to: CGPoint(x: 0, y: 50)) 
    path2.addLine(to: CGPoint(x: 340, y: 50))

    //thickHorizontalLayer.frame         = frame
    thickHorizontalLayer.path            = path.cgPath
    thickHorizontalLayer.strokeColor     = strokeColor
    thickHorizontalLayer.lineWidth       = 15
    thickHorizontalLayer.fillColor       = UIColor.clear.cgColor
    thickHorizontalLayer.lineDashPattern = [ 0.5, 6 ]
    thickHorizontalLayer.lineDashPhase   = 0.25

    self.layer.addSublayer(thickHorizontalLayer)

看看它画了什么：http://imgur.com/a/2NuRE

这是最好的方法吗？如果你看到，第一个破折号比其他破折号更细...

另外一个问题：如何获取 UIView 的绑定的 y 值？例如bound=340，就是上面这种情况。

编辑：

我正在尝试绘制 2 个破折号图案（一个细，另一个粗），但它变得令人困惑...:[=16=]

    fileprivate let thickHorizontalLayer = CAShapeLayer()
    fileprivate let thinHorizontalLayer = CAShapeLayer()

    let strokeColor                      = UIColor.white.cgColor
    let path2 = UIBezierPath()
    path2.move(to: CGPoint(x: 20, y: 50)) 

    path2.addLine(to: CGPoint(x: 320, y: 50)) 

    //thickHorizontalLayer.frame           = frame
    thickHorizontalLayer.path            = path2.cgPath
    thickHorizontalLayer.strokeColor     = strokeColor
    thickHorizontalLayer.lineWidth       = 20
    thickHorizontalLayer.fillColor       = UIColor.clear.cgColor
    thickHorizontalLayer.lineDashPattern = [ 1, 73.5 ]
    //thickHorizontalLayer.lineDashPhase   = 0.25

    self.layer.addSublayer(thickHorizontalLayer)

    let path3 = UIBezierPath()
    path3.move(to: CGPoint(x: 0, y: 52.5)) 
    path3.addLine(to: CGPoint(x: 340.0, y: 52.5)) 


    //thinHorizontalLayer.frame            = frame
    thinHorizontalLayer.path             = path3.cgPath
    thinHorizontalLayer.strokeColor      = strokeColor
    thinHorizontalLayer.lineWidth        = 15.0
    thinHorizontalLayer.fillColor        = UIColor.clear.cgColor
    thinHorizontalLayer.lineDashPattern  = [ 0.5, 6.25 ]
    //thinHorizontalLayer.lineDashPhase    = 0.25

    self.layer.addSublayer(thinHorizontalLayer)

画的是这个：http://imgur.com/NBW1TGQ

如果仔细看，可以看出它变得很奇怪（看破折号的颜色）...：http://imgur.com/YlVJ7mn

我正在尝试从 x:20 到 x:320 绘制 5 条破折号，并在它们之间（但在 x:0 到 x:340 处）绘制 9 条较细的破折号。希望有人帮我解决这个问题...

Answer 1

我已经解决了这个问题：

    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 上的虚线变得奇怪

Drown dashed lines on swift getting weird

core-graphics

uikit

ios

quartz-core

swift