Search code examples
javascriptjquerymouse-cursor

Find the place of a cursor in rectangle

I don't know how to find the place part (one of 4 triangles) of a cursor in a rectangle.

This image is more efficient than my explication :s

enter image description here

Im in javascript (so the rectangle is a DIV, 0,0 placed) I have those varaibles :

var cursor_x = e.clientX + $(document).scrollLeft()
var cursor_y = e.clientY + $(document).scrollTop()

var rect_w = $( rectangle ).width()
var rect_h = $( rectangle ).height()

I just want to know mathematically where is the cursor, in the triangle 1, 2, 3 or 4

Solution

  • What I think is the easiest way is to first normalize y so the computation is the same as for a square and then check for on which side of the diagonals you are...

    var ynorm = y * w / h;
var s1 = x > ynorm ? 0 : 1;
var s2 = (w - x) > ynorm ? 0 : 1;
var area = s1*2 + s2;

    the final area variable is a number between 0 and 3 telling in which of the four parts you are.