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

Question

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

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

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

我正在使用的另一种方法可能是将框位置偏移高度/宽度，这可能会产生右下位置的效果。

This is a quick link to my JS

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

谢谢，
列维

Answer 1

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

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

然后：

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

你在计算它是从左到右还是从右到左似乎是不必要的复杂。