javascript - 如何获取一组 Raphael 对象的 BBox 宽度和高度？

Question

在Raphel.js中，如何获取一组Raphael对象的BBox宽高？

例如，我在我的 Rapheal 论文中渲染了几个元素，如下所示:

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 ...);

我尝试用下面的方式获取一组元素的BBox宽高:

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

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

有时它可以正常工作，但有时我会得到 Infinity 的高度值。我想这是Rapheal的一个错误。那么，如果我想获取 Canvas (一组元素)的当前 BBox 大小，正确的方法是什么？

Answer 1

您可以手动完成。对于组的每个元素:

1. 获取左 或x 坐标。获得最小值。 var MinLeft

2. 获得正确的坐标。它可以像 left+width 或 x2 这样计算。获取最大值。 var MaxRight

3. 获取top 或y 坐标。获得最小值。 var MinTop

4. 获取底部坐标。它可以像 top+height 或 y2 那样计算。获取最大值。 var MaxBottom

5. 结果:你组的left=MinLeft；你的组的top=MinTop;你的组的height=MaxBottom-MinTop;你组的 width=MaxRight-MinLeft