有人能解释为什么这个坐标数学有效吗？

Question

可视化具有方形空间的画布，对象可以在x和y方向上移动，但不能在对角线上移动。移动基于鼠标点击（mouseX，mouseY）捕获的鼠标坐标。假设obj.move（）从其相对位置移动到提供的（x，y）位置。

if (Math.abs(mouseX-objX) > Math.abs(mouseY-objY)){
    if(mouseX > objX){
        obj.move(SQUARE_SIZE, 0);
    }else{
        obj.move(-SQUARE_SIZE, 0);
    }
}else{
    if(mouseY > objY){
        obj.move(0, SQUARE_SIZE);
    }else{
        obj.move(0, -SQUARE_SIZE);
    }
}

我理解所有代码，但我无法掌握数学概念。有人可以用图形方式解释这个问题，还是指出我在正确的道路上？

现在不重要（直到我理解这个数学运算），但是如果我想在其中加入对角运动，我该怎么做呢？

Answer 1

在处理路线时，您需要距离和方向。例如，如果dX = -2，则距离为|dX| = 2，方向为sign(dX) = -1。您可以使用这些术语来简化代码。

int dx = mouseX - objX, distX = Math.abs(dX), dirX = Math.signum(dX);
int dy = mouseY - objY, distY = Math.abs(dY), dirY = Math.signum(dY);

// Move diagonal
if(distX == distY))
    obj.move(dirX * SQUARE_SIZE, dirY * SQUARE_SIZE);

// Move horizontal
else if(distX > distY)
    obj.move(dirX * SQUARE_SIZE, 0);

// Move vertical
else
    obj.move(0, dirY * SQUARE_SIZE);

示例：

让我们说你从位置0（绿色）开始，然后点击鼠标位置3（红色）：

示例1 （无对角线）：

1. （来自pos：0）dX = 2, dy = -1，|dX| > |dy|和dirX > 0，向右移动（SQUARE_SIZE）
2. （来自pos：1）dX = 1, dy = -1，|dX|<= |dy|和dirY < 0，向下移动（-SQUARE_SIZE）
3. （来自pos：2）dX = 1, dy = 0，|dX| > |dy|和dirX > 0，向右移动（SQUARE_SIZE）
4. （来自pos：3）完成

示例2 （带对角线）：



1. （来自pos：0）dX = 2, dy = -1，|dX| > |dy|和dirX > 0，向右移动（SQUARE_SIZE）
2. （来自pos：1）dX = 1, dy = -1，|dX| = |dy|，dirX > 0和dirY < 0，（SQUARE_SIZE，-SQUARE_SIZE）
3. （来自pos：2）完成

Answer 2

它只检查鼠标从物体到x方向的偏移是否大于y。

如果它更大，它将移动到x方向，实际方向取决于鼠标是在当前对象的左侧还是右侧。

如果它更小，它将向y方向移动，同样是实际方向，取决于鼠标是在当前对象之上还是之下。