How to get BBox width & height of a group of Raphael objects?

Question

In Raphel.js, how to get BBox width & height of a group of Raphael objects ?

For example, I have rendered several elements on my Rapheal paper as below:

var paper = Raphael(10, 50, 320, 200);
var st = paper.set();

var c = paper.rect(40, 40, 50, 50, 10);
var e = paper.ellipse(50, 50, 40, 20);
var i = paper.image("apple.png", 10, 10, 80, 80);
var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!");
...

st.push(c, e, i, t ...);

I tried to use the following way to get BBox width and height of a group of elements:

var myBBox = st.getBBox();
var width = myBBox.width;
var height = myBBox.height;

console.log(width+','+height);

Sometimes it is working, but sometimes I got value Infinity for height. I guess it is a bug of Rapheal. So, If I want to get the current BBox size of my canvas (a group of elements), what is the correct way to do it?

Answer 1

You can do it manually. For each element of group:

1. Get left or x coordinate. Get the minimal value. var MinLeft

2. Get right coordinate. It can be calculated like left+width or x2. Get the maximum value. var MaxRight

3. Get top or y coordinate. Get the minimal value. var MinTop

4. Get bottom coordinate. It can be calculated like top+height or y2. Get the maximum value. var MaxBottom

5. Result: your group's left=MinLeft; your group's top=MinTop; your group's height=MaxBottom-MinTop; your group's width=MaxRight-MinLeft