ios - 使 UIPanGesture 跟随线条

Question

我正在尝试移动一个红点，按照这个板线:

红点是 Dot 类的实例，它是 UIImage View 的子类:

class Dot: UIImageView {

enum directions {
    case up, down, left, right, nordWest, nordEst, southWest, southEst
}

var position: Int = 4

var possibleDirections: [directions] {
    switch position {
    case 0:
        return [.right, .down, .southEst]
    case 1:
        return [.left, .right, .down]
    case 2:
        return [.left, .down, .southWest]
    case 3:
        return [.up, .down, .right]
    case 4:
        return [.up, .down, .left, .right, .nordWest, .nordEst, .southWest, .southEst]
    case 5:
        return [.up, .down, .left]
    case 6:
        return [.up, .right, .nordEst]
    case 7:
        return [.up, .left, .right]
    case 8:
        return [.up, .left, .nordWest]
    default:
        return []
    }
}

}

这是我的 View Controller :

    @IBOutlet weak var redDot: Dot!

override func viewDidLoad() {
    super.viewDidLoad()

    redDot.isUserInteractionEnabled = true

    let panGesture = UIPanGestureRecognizer(target: self, action: #selector( moveDot(_:) ))
    redDot.addGestureRecognizer(panGesture)
}


@objc func moveDot(_ sender: UIPanGestureRecognizer) {
    switch sender.state {
    case .began, .changed:
        moveDotWith(gesture: sender)
    case .ended, .cancelled:
        proceedToMove()
    default:
        break
    }
}

private func moveDotWith(gesture: UIPanGestureRecognizer) {

    let translation = gesture.translation(in: redDot)
    let transform = CGAffineTransform(translationX: translation.x, y: translation.y)
    redDot.transform = transform

}

private func proceedToMove() {

}

我想排序 moveDotWith(gesture) 函数只允许移动行后的点，然后 proceedToMove 函数将保存更改 redDot.position = (Int)

我想我可以保存更改，但我不知道如何让红点跟随线条，因此只能在允许的方向上。

位置从 0 到 8，就像这样:

我希望用户不能在空白区域拖动点，只能沿着线拖动，然后如果用户松开点，它会移动到最近的点。

示例:红点在 1，如果用户试图将其拖动到 3，则没有任何反应。如果用户将其拖动到 2，则点跟随灰线，然后当用户释放它时，如果点超过线的一半，则转到 2，否则返回 1。

Answer 1

这需要一些数学运算，但有一种方法...

将您的“possibleDirections”更改为“possibleEndPoints”:

var possibleEndPoints: [Int] {
    switch position {
    case 0:
        return [1, 3, 4]
    case 1:
        return [0, 2, 4]
    case 2:
        return [1, 4, 5]
    case 3:
        return [0, 4, 6]
    case 4:
        return [0, 1, 2, 3, 5, 6, 7, 8]
    case 5:
        return [2, 4, 8]
    case 6:
        return [3, 4, 7]
    case 7:
        return [4, 6, 8]
    case 8:
        return [4, 5, 7]
    default:
        return []
    }
}

现在，当用户拖动时，您需要计算到垂直于拖动点的直线上的点的距离:

所以，

• 位置 == 0
• possibleEndPoints == [1, 3, 4]
• DP 是拖动点
• A 是 0 -> 1
线上的点
• B 是 0 -> 4
线上的点
• C 是 0 -> 3
线上的点

最短的线将是到有效线段的“最近点”，因此您可以将 redDot 移动到该点 - 在本例中为 A。当用户抬起手指时，计算“是 A 到 1 的 50% 以上”。

随着用户继续拖动，您可能会到达:

现在 B 是离拖动点最近的点，所以将 redDot 移到 B。当用户抬起手指时，计算“是 B 到 4 的 50% 以上”。

您必须考虑用户拖动超过有效点的情况，如:

你必须想出自己的逻辑来决定 redDot 应该去哪里。