Question

我正在尝试创建一个类似于http://raphaeljs.com/graffle.html的可拖动图表（适用于1.5.2和2.1），但我希望在框中包含文字。

我在另一个问题中使用建议添加了文字：How can I combine objects in the Raphael javascript library?

这个解决方案适用于RaphaelJS 1.5.2，但它在RaphaelJS 2.1中有所突破。

jsFiddle示例： http://jsfiddle.net/ScBtZ/

我发现的唯一区别是Element.getBBox()会返回一个非常不同的结果。

样品：

在1.5.2中：

SVGRect
  height: 40
  width: 100
  x: 526.5
  y: 25

在2.1：

Object
  height: 500780.9482062537
  width: 1009980
  x: 526.51
  x2: 1010506.51
  y: -399735.94795512746
  y2: 101045.00025112627

我是否遗漏了从v1.5到v2的变化，或者这个奇怪的BBox是一个错误？我有什么想法可以解决这个问题吗？

谢谢！

Answer 1

Raphael 2 getBBox可能有些小问题，但在你的情况下你的数据是错误的。尝试删除“围绕数字：

http://jsfiddle.net/nhatcher/ScBtZ/9/

很好的例子！

（请注意，其他解决方案在VML中已破解）

Answer 2

在答案被接受之后我就到了这里，但我仍然遇到了一些问题。如果你像我一样，你可能想从Raphael.js GitHub中获取最新的开发版本： https://github.com/DmitryBaranovskiy/raphael/

拉斐尔似乎已经纳入了安德烈亚斯的答案（1972年，而不是1300，就像答案写的那样）。拉斐尔的最新开发版本为我工作。

Answer 3

好吧，看起来在Raphael中尝试用自定义实现替换本机方法getBBox。这背后的原因可能是本机getBBox方法有一些错误，并且它返回某些形状的不正确结果。另一个原因可能是浏览器的可移植性，我不确定VML中是否有getBBox方法。

然而，从您指出的值看来，这个自定义实现似乎有它的缺陷。您可以使用以下代码在Raphael 2.x中使用本机getBBox：

var bb1 = obj1.node.getBBox(),
    bb2 = obj2.node.getBBox(),

我测试了它并且看起来不错：http://jsfiddle.net/ScBtZ/2/

Answer 4

如果您将 BBox 与转换结合使用，拉斐尔确实有错误。我发现了一个适用于我的修复程序。

raphael.js中的第1300行

var pathDimensions = R.pathBBox = function (path) {
    var pth = paths(path);
    if (pth.bbox) {
        return clone(pth.bbox) ; // FREEGROUP FIX!!!!!!
    }
    if (!path) {
        return {x: 0, y: 0, width: 0, height: 0, x2: 0, y2: 0};
    }

Answer 5

Andreas的回答是正确的......

也在https://github.com/DmitryBaranovskiy/raphael/issues/543

处提到

clone是正确的修复，如果你需要重复使用getBBox（）函数多次，因为它在内部被更改....

BTW：感谢Dimitry为Raphael.js，它真的是一件非凡的作品！

RaphaelJS 2.1 vs. 1.5.2 getBBox Error

5 个答案: