Skip to content

Instantly share code, notes, and snippets.

@davidtorroija
Forked from gregtap/bounding_box_fabricjs.js
Created September 26, 2016 15:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save davidtorroija/9b213d307b2052375b905168ca9af4b9 to your computer and use it in GitHub Desktop.
Save davidtorroija/9b213d307b2052375b905168ca9af4b9 to your computer and use it in GitHub Desktop.
Get bounding box off all objects on a fabric canvas
getBoardBoundingBox: function(canvas) {
var minX = Number.MAX_VALUE;
var maxX = Number.MIN_VALUE;
var minY = Number.MAX_VALUE;
var maxY = Number.MIN_VALUE;
canvas.forEachObject(function(o){
var rad = o.angle * Math.PI/180;
var w = o.width * o.scaleX;
var h = o.height * o.scaleY;
// xmax = x * w/2 * |cos(theta)| + h/2 * |sin(theta)|
var omaxX = o.left +((w/2) * Math.abs(Math.cos(rad))) + ((h/2) * Math.abs(Math.sin(rad)));
var ominX = o.left - (omaxX - o.left);
// ymax = y * w/2 * |sin(theta)| + h/2 * |cos(theta)|
var omaxY = o.top + ((w/2) * Math.abs(Math.sin(rad))) + ((h/2) * Math.abs(Math.cos(rad)));
var ominY = o.top - (omaxY - o.top);
if (ominX < minX)
minX = ominX;
if (omaxX > maxX)
maxX = omaxX;
if (ominY < minY)
minY = ominY;
if (omaxY > maxY)
maxY = omaxY;
});
var box = {
"x": minX,
"y": minY,
"w": maxX - minX,
"h": maxY - minY
};
return box;
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment