使 UIPanGesture 跟随线条

Question

我正在尝试移动一个红点，遵循这条线路：

红点是 Dot class 的一个实例，它是 UIImage 视图的子class :

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 []
    }
}

}

这是我的 viewController :

    @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 []
    }
}

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

所以，

position == 0
possibleEndPoints == [1, 3, 4]
DP是拖动点
A 是直线 0 -> 1
B 是直线 0 -> 4
C 是直线 0 -> 3

最短的线将是到有效线段的 "closest point"，因此您可以将 redDot 移动到该点 - 在本例中为 A。当用户抬起手指时，计算"is A more than 50% of the way to 1".

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

现在 B 是离拖动点最近的点，所以将 redDot 移动到 B。当用户抬起手指时，计算"is B more than 50% of the way to 4".

您必须考虑用户将拖过有效点的情况，如：

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

使 UIPanGesture 跟随线条

make UIPanGesture follow lines

ios

swift

uigesturerecognizer

uipangesturerecognizer