Raphael.js 函数 getBBox 在 IE8 中返回 NAN/NAN/NAN

Question

使用 Raphaël 2.1.4 - JavaScript 矢量库做这样的事情：

var textDummy = paper.text(50,500, 'hello world').attr({fill: 'transparent', 'font-size': 14});
var textBox = textDummy.getBBox();

用 chrome 和 firefox 一切都很好，但在 IE8 中它返回 NaN/NaN/NaN， par example textBox.height 是 NaN.

我该如何解决这个问题？

Answer 1

我从这个问题的答案中找到了解决方法 "Raphael JS and Text positioning"

如果我使用 _getBBox() 而不是 getBBox() 一切都在 ie 8 中工作。

_getBBox() is undocumented but used internally by Raphael itself, and it works!

Answer 2

我在 Rapahel 2.2.0 和 2.2.1 中遇到了同样的问题，使用 ._getBBox() 并没有为我解决问题。

如果它已定义且常规 .getBBox() 不起作用，则为我修复它的方法是回退到 .auxGetBBox()，如下所示：

var bbox = path.getBBox( );

// Workaround for apparent bug in Raphael's VML module's getBBox() override
if( isNaN( bbox.x ) && path.auxGetBBox ){
  bbox = path.auxGetBBox();
}

我没有针对底层错误的修复程序，但我找到了它的根源。

在 VML 模式下，Raphael 使用初始的 getBBox() 函数，将其保存为元素原型上的 auxGetBBox()，然后用一个看似损坏的函数替换它。

它有基于定义为 var z = 1/this.paper._viewBoxShift.scale; 的变量的计算，这显然期望 _viewBoxShift.scale 是当前视图框与初始视图框相比的比例的一些因素，但实际上 _viewBoxShift.scale 是一个像这样的对象，它似乎来自 paperproto.getSize():

{ height: someNumber, width: someNumber }

这是所有 NaN 的来源。 Cannae 除以一个对象。

因此，如果未使用视图框应用缩放，此解决方法可以正常工作，但如果已应用缩放，则可能会给出不正确的结果（在 VML 模式下的最新版本的 raphael 中，我根本无法工作，但这是一个单独的问题）。修复 that 将涉及深入挖掘 Raphael 的 VML 模块以将适当的缩放因子传递给此 z 变量。

Raphael.js 函数 getBBox 在 IE8 中返回 NAN/NAN/NAN

Raphael.js function getBBox give back NAN/NAN/NAN in IE8

javascript

internet-explorer-8

raphael