Search code examples
iosswiftuibezierpath

UIBezierPath has only half stroke


When I try to draw a shape like below with the following codes, the shape only shows half stroke line.

enter image description here

let shape = SKShapeNode()
            shape.path = createPointerPath().cgPath
            shape.position = CGPoint(x: frame.midX, y: frame.midY)
            shape.fillColor = UIColor(red: 1.0, green: 0.439, blue: 0.678, alpha: 1.0)
            shape.strokeColor = .white
            shape.lineWidth = 2
            addChild(shape)

Create shape:

func createPointerPath() -> UIBezierPath {

    let pointerPath = UIBezierPath()
    pointerPath.move(to: CGPoint(x:0, y:0))

    pointerPath.addCurve(to: CGPoint(x:0, y:100), controlPoint1: CGPoint(x:-10, y:0), controlPoint2: CGPoint(x:-50, y:100))
    pointerPath.addCurve(to: CGPoint(x:0, y:0), controlPoint1: CGPoint(x:50, y:100), controlPoint2: CGPoint(x:10, y:0))

    pointerPath.stroke()        
    pointerPath.close()
    return pointerPath
}

If I set x to 10, it shows another half stroe line, but the shape is not closed.

    pointerPath.addCurve(to: CGPoint(x:10, y:0), controlPoint1: CGPoint(x:50, y:100), controlPoint2: CGPoint(x:10, y:0))

enter image description here

Any suggestion? Thx!


Solution

  • This is what i got after trying; hope it helps you

        let v : UIView = UIView.init(frame: CGRect.init(x: 50, y: 50, width: 200, height: 200))
        v.layer.borderWidth = 2.0
        let shape = CAShapeLayer()
        shape.path = createPointerPath().cgPath
        shape.position = CGPoint(x: frame.midX, y: frame.midY)
        shape.fillColor = UIColor(red: 1.0, green: 0.439, blue: 0.678, alpha: 1.0).cgColor
        shape.strokeColor = UIColor.white.cgColor
        shape.lineWidth = 2
        v.layer.addSublayer(shape)
        self.addSubview(v)
    

    It's same func you have gave:

    func createPointerPath() -> UIBezierPath {
    
        let pointerPath = UIBezierPath()
        pointerPath.move(to: CGPoint(x:0, y:0))
    
        pointerPath.addCurve(to: CGPoint(x:0, y:100), controlPoint1: CGPoint(x:-10, y:0), controlPoint2: CGPoint(x:-50, y:100))
        pointerPath.addCurve(to: CGPoint(x:0, y:0), controlPoint1: CGPoint(x:50, y:100), controlPoint2: CGPoint(x:10, y:0))
    
        pointerPath.stroke()
        pointerPath.close()
        return pointerPath
    }
    

    Output:

    Output of Above Code