2

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

我使用另一个问题中的建议添加了文本：如何在 Raphael javascript 库中组合对象？

该解决方案在 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 是一个错误？有什么想法可以解决这个问题吗？

谢谢！

4

5 回答 5

2

Raphael 2 getBBox 可能有点错误，但在您的情况下，您的数据是错误的。尝试删除数字周围的 "：

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

好例子！

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

于 2012-04-20T07:15:27.217 回答
2

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

拉斐尔似乎已经合并了安德烈亚斯的答案（在 1972 行，而不是写答案时的 1300 行）。Raphael 的最新开发版本对我有用。

于 2013-04-16T19:27:05.723 回答
1

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

但是，从您指出的值来看，这种自定义实现似乎有其缺陷。您可以通过以下代码在 Raphael 2.x 中使用本机 getBBox：

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

我对其进行了测试，看起来不错：http: //jsfiddle.net/ScBtZ/2/

于 2012-04-09T21:24:37.173 回答
1

如果您将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};
    }
于 2012-05-16T08:32:40.660 回答
0

安德烈亚斯的回答是对的......

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

如果您需要多次重复使用 getBBox() 函数，因为它在内部发生了变化，那么 clone 是正确的解决方法......

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

于 2012-05-30T08:58:37.490 回答