快速溺水的线条变得奇怪

时间:2017-03-20 22:17:25

标签: ios swift uikit core-graphics quartz-core

我试图在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,就是上面这种情况。

编辑:

我试图绘制两个破折号图案(一个很薄,另一个很厚),但它让人感到困惑......:

    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个更细的破折号。希望有人帮助我...

1 个答案:

答案 0 :(得分:0)

我用这个解决了这个问题:How to make universal round draws (with lineDashPattern) with UIbezierPath on Swift

    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


    }