RaphaelJS 2.1 与 1.5.2 getBBox 错误

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 行，而不是写答案时的情况）。 Raphael 的最新开发版本对我有用。

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与transformation结合使用，Raphael 确实有错误。 我找到了一个适合我的修复程序。

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

安德烈亚斯的回答是正确的......

也参考 https://github.com/DmitryBaranovskiy/raphael/issues/543

如果您需要重复使用 getBBox() function 多次，那么克隆是正确的修复方法，因为它在内部发生了变化....

顺便说一句：感谢 Dimitry 的 Raphael.js，它确实是一项了不起的工作！！