This question is quite old, but since I did it, I'll answer it.
Think of two extents (bounding boxes) first as concentric squares. We are subtracting the inner one from the outer.
A----------------------------------B
| |
| A----------------------B |
| | | |
| | | |
| D----------------------C |
| |
D----------------------------------C
Then you are going to end up with 8 boxes.
A----------------------------------B
| 1 | 2 | 3 |
|----------------------------------|
| | | 4 |
| 8 | | |
|----------------------------------|
| 7 | 6 | 5 |
D----------------------------------C
So, the trick is to make the squares. Most graphics libraries have code to deal with 'extents'. I'll use OpenLayers in Javascript for an example. The idea is that you make extents (bounding boxes) by drawing a diagonal from each pair of points and get its bounding box, then cascade down using the points of some previously made bounding boxes. The code below should be self explanatory. We are subtracting extent e2, which is pictured as the inner extent, from extent e1, which is pictured as the outer extent:
var b1 = ol.extent.boundingExtent([ol.extent.getTopLeft(e1), ol.extent.getTopLeft(e2)]);
var b2 = ol.extent.boundingExtent([ol.extent.getBottomLeft(b1), ol.extent.getBottomLeft(e2)]);
var b3 = ol.extent.boundingExtent([ol.extent.getBottomLeft(e1), ol.extent.getBottomLeft(e2)]);
var b4 = ol.extent.boundingExtent([ol.extent.getBottomLeft(b3), ol.extent.getBottomRight(e2)]);
var b5 = ol.extent.boundingExtent([ol.extent.getBottomRight(e1), ol.extent.getBottomRight(e2)]);
var b6 = ol.extent.boundingExtent([ol.extent.getBottomRight(b5), ol.extent.getTopRight(e2)]);
var b7 = ol.extent.boundingExtent([ol.extent.getTopRight(e1), ol.extent.getTopRight(e2)]);
var b8 = ol.extent.boundingExtent([ol.extent.getTopLeft(e1), ol.extent.getTopLeft(b7)]);
For instance, notice how we use a coordinate from bounding box b1 to make b2, b3 to make b4, etc.
Now we know that the extents may not be not concentric. Some boxes may be outside of our answer. However, one cool condition to notice is that if a corner of the subtracting extent (e2) is inside the base extent (e1) then we need the three of its connected boxes. So, if the top left of e2 is in e1, then we need b1, b2, and b8. Similarly, if the bottom left corner of e2 is in e1, then we need b6, b7, and b8. You might notice some duplicates there such as b8, but we'll filter those out later. So, let's collect our results.
var results = [];
if (ol.extent.containsCoordinate(e1, ol.extent.getTopLeft(e2))) {
results.push(b1, b2, b3);
}
if (ol.extent.containsCoordinate(e1, ol.extent.getTopRight(e2))) {
results.push(b8, b7, b6);
}
if (ol.extent.containsCoordinate(e1, ol.extent.getBottomRight(e2))) {
results.push(b6, b5, b4);
}
if (ol.extent.containsCoordinate(e1, ol.extent.getBottomLeft(e2))) {
results.push(b2, b3, b4);
}
Eliminate the duplicates, but also pay attention to the fact that, especially in the case where the extents share borders, some of those boxes will be "empty". Usually, you can figure that out with an extent related getArea() function. Below is a clever javascript way to filter out duplicate objects in an array since Array.indexOf uses '===' and returns only its first match. And, we only collect boxes that actually have an area.
results = results.filter(function(a,i,arr) {
return arr.indexOf(a) === i && ol.extent.getArea(a) > 0;
});
Caveats of use:
Notice that if the two initial bounding boxes do not intersect, an empty list will result. So, this method only works on extents that intersect. Graphics libraries usually have a boolean function for intersection of two extents.
For example, if you are looking to load a potential extent (e1) minus one you've already loaded (e2) and they do not intersect, you probably just want to load e1 straight up. Depends on your application.
Hope this answer is useful to someone!