Search code examples
swiftcore-graphicsuibezierpath

Add an arrow end to the UIBezierPath addArc function


I'm trying to achieve the following result, to the end of an UIBezierPath arc:

enter image description here

I have found a similar answer here, but it does not utilize the addArc function, so I cannot set the start and end angles and is written on obj-c.


Solution

  • extension UIBezierPath {
        func addArrow(start: CGPoint, end: CGPoint, pointerLineLength: CGFloat, arrowAngle: CGFloat) {
            self.move(to: start)
            self.addLine(to: end)
    
            let startEndAngle = atan((end.y - start.y) / (end.x - start.x)) + ((end.x - start.x) < 0 ? CGFloat(Double.pi) : 0)
            let arrowLine1 = CGPoint(x: end.x + pointerLineLength * cos(CGFloat(Double.pi) - startEndAngle + arrowAngle), y: end.y - pointerLineLength * sin(CGFloat(Double.pi) - startEndAngle + arrowAngle))
            let arrowLine2 = CGPoint(x: end.x + pointerLineLength * cos(CGFloat(Double.pi) - startEndAngle - arrowAngle), y: end.y - pointerLineLength * sin(CGFloat(Double.pi) - startEndAngle - arrowAngle))
    
            self.addLine(to: arrowLine1)
            self.move(to: end)
            self.addLine(to: arrowLine2)
        }
        
    }
    

    Usage:

        path.addArc(withCenter: center, radius: radius,
                    startAngle: angle1Inradians, endAngle: angle2Inradians,
                        clockwise: false)
    
        let pathCurrentPoint = path.currentPoint
        let x = center.x + radius * cos(angle1Inradians)
        let y = center.y - radius * sin(angle2Inradians)
        let point = CGPoint(x: x , y: y )
        path.addArrow(start: pathCurrentPoint, end: point, pointerLineLength: 10, arrowAngle: CGFloat(Double.pi / 4))
    
        let layer = CAShapeLayer()
        layer.fillColor = UIColor.clear.cgColor
        layer.lineWidth = 2
        layer.strokeColor = UIColor.orange.cgColor
        layer.path = path.cgPath
        self.layer.addSublayer(layer)