Für achsenparallel ausgerichtete Rechtecke
Wir haben für den internen Gebrauch ein kleines Plugin für das JavaScript-Framework jQuery programmiert, das wir nun auch anderen Entwicklern zur Verfügung stellen möchten.
Es handelt sich um eine Kollisionsabfrage für achsenparallel ausgerichtete Rechtecke. Darunter fallen zur Zeit, da es erst mit CSS3 eine Möglichkeit zur Drehung von Objekten geben wird, alle HTML-Blockelemente.
/*
* Collision Check Plugin v1.1
* Copyright (c) Sarah Groß, 48design.de
* v1.1 rewrite with thanks to Daniel
*
* @requires jQuery v1.3.2
* @description Checks single or groups of objects (divs, images or any other block element) for collission / overlapping
* @returns an object collection with all colliding / overlapping html objects
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
(function($) {
$.fn.collidesWith = function(elements) {
var rects = this;
var checkWith = $(elements);
var c = $([]);
if (!rects || !checkWith) {
return false;
}
rects.each(function() {
var rect = $(this);
// define minimum and maximum coordinates
var rectOff = rect.offset();
var rectMinX = rectOff.left;
var rectMinY = rectOff.top;
var rectMaxX = rectMinX + rect.outerWidth();
var rectMaxY = rectMinY + rect.outerHeight();
checkWith.not(rect).each(function() {
var otherRect = $(this);
var otherRectOff = otherRect.offset();
var otherRectMinX = otherRectOff.left;
var otherRectMinY = otherRectOff.top;
var otherRectMaxX = otherRectMinX + otherRect.outerWidth();
var otherRectMaxY = otherRectMinY + otherRect.outerHeight();
// check for intersection
if (rectMinX >= otherRectMaxX ||
rectMaxX <= otherRectMinX ||
rectMinY >= otherRectMaxY ||
rectMaxY <= otherRectMinY) {
return true; // no intersection, continue each-loop
} else {
// intersection found, add only once
if (c.length == c.not(this).length) {
c.push(this);
}
}
});
});
// return collection
return c;
}
})(jQuery);