Search code examples
swift3cashapelayer

CAShapeLayer dashed line clipping at end of view

Okay so I'm trying to draw a dashed line inside of a view, which should be fairly simple but no matter what I've tried I keep getting the dashes at both ends clipping and I would like to have the dash not have any clipped segments. Here's the extension I made (the purple background color is just there so I can see the frame)

extension UIView {
public func addDashedLineToView(_ color : UIColor) {
    self.backgroundColor = UIColor.purple
    let cgColor = color.cgColor

    let shapeLayer: CAShapeLayer = CAShapeLayer()
    let frameSize = self.frame.size
    let shapeRect = CGRect(x: 0, y: 0, width: frameSize.width, height: frameSize.height)

    shapeLayer.bounds = shapeRect
    shapeLayer.position = CGPoint(x: frameSize.width / 2, y: frameSize.height)
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.strokeColor = cgColor
    shapeLayer.lineWidth = 6
    shapeLayer.lineCap = kCALineCapRound
    shapeLayer.lineJoin = kCALineJoinRound
    shapeLayer.lineDashPattern = [8, 10]

    let path: CGMutablePath = CGMutablePath()
    path.move(to: .zero)
    path.addLine(to: CGPoint(x: self.frame.width, y: 0))
    shapeLayer.path = path

    self.layer.addSublayer(shapeLayer)
    self.layer.masksToBounds = true
}

and here's a screenshot of what it ends up looking like. enter image description here

not sure where I'm messing up here, but I know that I must be doing something wrong since it shouldn't be this hard to draw a dashed line in swift (I hope).

Solution

  • You can adjust the start position of the pattern with lineDashPhase. Try

    shapeLayer.lineDashPhase = -4