How to make resizeable box go from left to bottom as well as right to top.

Question

Ok, so I am working on building my own catalogue of some sort. I am working on making a selecting tool to choose a part of the image to see up close. This is where I am currently working on it

Anyway, I am missing something in my logic as far as how to make the box resize when I drag from the bottom right corner to the top left. I know it isn't working because of how the box is positioned. Positioning works by using the top left corner as a reference point. So I had two solutions I was working on but I couldn't get very far with them.

The first was trying to figure out a way to position the box based on the bottom right corner.

The other method I was playing with was perhaps offsetting the box position by the height/width and perhaps this would have the effect of having a bottom right position.

This is a quick link to my JS

So, any help with working through this problem would be appreciated.

Thanks,
Levi

Answer 1

I would simplify it somewhat. Basically you want to draw a box from (top,left) to (bottom,right). Assuming:

• (downX,downY): coordinates when you press the moust;
• (currentX,currentY): current coordinates.

then:

• top: min(downY,currentY);
• left: min(downX,currentX);
• bottom: max(downY,currentY);
• right: max(downX,currentX).

What you're doing with calculating if it's left to right or right to left seems unnecessarily convoluted.