Как создать пунктирную линию со стрелкой в ​​swift 4 с помощью безье пути? - PullRequest
Новая
       16

Как создать пунктирную линию со стрелкой в ​​swift 4 с помощью безье пути?

0 голосов
/ 27 декабря 2018

Я хочу создать стрелку с пунктирной линией в точках касания пользователя.

Это мой код.Но у меня нет никакого решения. 

let arrow = UIBezierPath()
            arrow.addArrow(start: CGPoint(x: startTouch!.x, y: startTouch!.y), end: CGPoint(x: secondTouch!.x, y: secondTouch!.y), pointerLineLength: 20, arrowAngle: CGFloat(Double.pi / 5))
            self.currentContext?.setLineCap(.round)
            self.currentContext?.setLineJoin(.round)
            self.currentContext?.addPath(arrow.cgPath)

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.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)
    }    
}

enter image description here

Я приложил скриншот для требования.

1 Ответ

0 голосов
/ 27 декабря 2018

Пожалуйста, попробуйте следующий код для вашего решения, 

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    let arrow = UIBezierPath()
    let startTouchPoint = CGPoint(x: startTouch!.x, y: startTouch!.y) //CGPoint(x: 200, y: 200)
    let secondTouchPoint = CGPoint(x: secondTouch!.x, y: secondTouch!.y) //CGPoint(x: 50, y: 50)
    arrow.addArrow(start: startTouchPoint, end: secondTouchPoint, pointerLineLength: 20, arrowAngle: CGFloat(Double.pi / 5))

    let arrowLayer = CAShapeLayer()
    let path = CGMutablePath()
    arrowLayer.strokeColor = UIColor.red.cgColor
    arrowLayer.lineDashPattern = [7, 6]
    arrowLayer.lineWidth = 3
    path.addPath(arrow.cgPath)
    path.addLines(between: [startTouchPoint, secondTouchPoint])
    arrowLayer.path = path

    arrowLayer.fillColor = UIColor.clear.cgColor
    arrowLayer.lineJoin = CAShapeLayerLineJoin.round
    arrowLayer.lineCap = CAShapeLayerLineCap.round

    self.view.layer.addSublayer(arrowLayer)
}

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)
    }
}

Выход:

output

Данные испытаний: 

let startTouchPoint = CGPoint(x: 200, y: 200)
let secondTouchPoint = CGPoint(x: 50, y: 50)
...