javascript - 如何使可调整大小的框从左到下以及从右到上

Question

好的，所以我正在努力构建我自己的某种目录。我正在制作一个选择工具来选择图像的一部分以近距离查看。 This is where I am currently working on it

无论如何，当我从右下角拖动到左上角时，我在逻辑上遗漏了一些关于如何调整框大小的内容。我知道它不起作用，因为盒子的位置。定位通过使用左上角作为引用点来进行。所以我有两个正在研究的解决方案，但我无法对它们走得太远。

第一个是试图找出一种基于右下角定位框的方法。

我正在尝试的另一种方法可能是通过高度/宽度偏移框位置，这可能会产生右下角位置的效果。

This is a quick link to my JS

因此，我们将不胜感激解决此问题的任何帮助。

谢谢，
列维

Answer 1

我会稍微简化一下。基本上你想从(上，左)到(下，右)画一个盒子。假设:

• (downX,downY):按下鼠标时的坐标；
• (currentX,currentY): 当前坐标。

然后:

• 顶部:min(downY,currentY);
• 左:min(downX,currentX);
• 底部:max(downY,currentY);
• 右:max(downX,currentX)。

如果计算它是从左到右还是从右到左，您正在做的事情似乎不必要地令人费解。