javascript test Come verificare se un elemento si sovrappone ad altri elementi?



regular expression online (4)

Questa domanda ha già una risposta qui:

Ho due elementi div. Ognuno di essi ha una larghezza e un'altezza di 450 px. Come posso verificare se il primo div si sovrappone al secondo div?

Ho provato ad usare javascript hittest, ma è un po 'complicato. Dato che sto cercando di scoprire come funziona, vorrei iniziare con un codice più semplice.

Ho scoperto che posso usare .getClientRects per ottenere il limite di un elemento, ma non sono esattamente sicuro di come confrontare i limiti.

Per favore consigliami!


In Internet Explorer precedente alla versione 8, l'oggetto TextRectangle restituito contiene le coordinate nella dimensione fisica dei pixel, mentre dalla versione 8 contiene le coordinate nella dimensione logica dei pixel.

Se hai bisogno del rettangolo di delimitazione dell'intero elemento, usa il metodo getBoundingClientRect .


Qualcosa del genere per rect1 e rect2 recuperati tramite getBoundingClientRect() :

var overlap = !(rect1.right < rect2.left || 
                rect1.left > rect2.right || 
                rect1.bottom < rect2.top || 
                rect1.top > rect2.bottom)

Spiega: se una o più espressioni nella parentesi sono true , non c'è sovrapposizione. Se tutti sono false , ci deve essere una sovrapposizione.


element.getBoundingClientRect () è silenzioso nei browser moderni, fornisce un parente legato allo schermo. guarda getBoundingClientRect() Poi prova se i riquadri di delimitazione si sovrappongono, cioè geometria semplice ...

oh scusami ... ho trovato la tua modifica troppo tardi ...


Ecco qualcosa che ho fatto qualche giorno fa: https://gist.github.com/yckart/7177551

var AABB = {
  collide: function (el1, el2) {
    var rect1 = el1.getBoundingClientRect();
    var rect2 = el2.getBoundingClientRect();

    return !(
      rect1.top > rect2.bottom ||
      rect1.right < rect2.left ||
      rect1.bottom < rect2.top ||
      rect1.left > rect2.right
    );
  },

  inside: function (el1, el2) {
    var rect1 = el1.getBoundingClientRect();
    var rect2 = el2.getBoundingClientRect();

    return (
      ((rect2.top <= rect1.top) && (rect1.top <= rect2.bottom)) &&
      ((rect2.top <= rect1.bottom) && (rect1.bottom <= rect2.bottom)) &&
      ((rect2.left <= rect1.left) && (rect1.left <= rect2.right)) &&
      ((rect2.left <= rect1.right) && (rect1.right <= rect2.right))
    );
  }
};




boundary