Encuentra el lugar de un cursor en el rectángulo

Question

No sé cómo encontrar la parte del lugar (uno de los 4 triángulos) de un cursor en un rectángulo.

Esta imagen es más eficiente que mi explicación: s

Im en javascript (para que el rectángulo es un DIV, 0,0 colocó) tengo esos 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() 

Solo quiero saber matemáticamente dónde está el cursor, en el triángulo 1, 2, 3 o 4

thx

Answer 1

Lo que creo que es la forma más fácil es normalizar primera y por lo que el cálculo es el mismo que para un cuadrado y luego comprobar en qué lado de las diagonales que eres ...

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

la final area variable es un número entre 0 y 3 que indica en cuál de las cuatro partes se encuentra.

Answer 2

@ 6502: Te recuerdo, es muy útil.

Para obtener más información, im trabajando en un plugin de jQuery puede ordenar la luz experimental, que puede trabajar con la colocación flotante (arriba, izquierda, derecha, abajo)

el código:

simply use $(..selector..).sortable({ items: ..selector.. }) 

-

$.fn.sortable = function(o) {  
     o.self = this; 
     o.helper = null;   
     $(document).bind('mouseup.sortable', function(e) { 
      if(o.sortable) { 
       o.sortable.css({ opacity: ''}); 
       if(o.target) { 
        if(o.area == 's') { 
         o.sortable.css({ float: '' })           
        } 
        else if(o.area == 'n') { 
         o.sortable.css({ float: '' }) 
         o.target.css({ float: '' }) 
        } 
        else if(o.area == 'w') {      
         o.target.css({ float: 'left' }) 
         o.sortable.css({ float: 'left' }) 
        } 
        else if(o.area == 'e') {      
         o.target.css({ float: 'left' }) 
         o.sortable.css({ float: 'left' })       
        }     
        o.target[ o.area == 's' || o.area == 'e' ? 'before':'after'](o.sortable); 
        o.target[0].style.setProperty('cursor', false , false); 
        o.target = null;     
       } 
       o.helper.remove(); 
       o.sortable = null;    
      } 
     }).bind('mousemove.sortable', function(e) {   
      if(o.sortable) { 
       o.ex = e.clientX + $(document).scrollLeft() + 10 
       o.ey = e.clientY + $(document).scrollTop() - o.sortable[0]._height - 10 
       o.helper.css({ left: o.ex, top: o.ey }); 
      } 
     }); 
     return $(this.selector).delegate(o.items, 'mousemove.sortable', function(e) {    
      if(o.sortable && o.sortable[0] != this) { 
       var self = $(this) 
       var x = e.clientX + $(document).scrollLeft() - self.offset().left 
       var y = e.clientY + $(document).scrollTop() - self.offset().top 
       var w = self.width() 
       var h = self.height()    
       var ynorm = y * w/h; 
       o.area = (w - x) > ynorm ? (x > ynorm ? 's':'e') : (x > ynorm ? 'w':'n');     
       this.style.setProperty('cursor', o.area+'-resize', 'important'); 
       o.target = self; 
      } 
     }).delegate(o.items, 'mousedown.sortable', function(e) {   
      o.sortable = $(this).css({ opacity: 0.4 }); 
      this._width = o.sortable.width(); 
      this._height = o.sortable.height();   
      o.helper = o.sortable.clone().css({ position: 'absolute', left: -99999, top: 0 }) 
      $('body').append(o.helper)    
      return false; 


}); 
    }