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

【问题标题】：Raphael.js function getBBox give back NAN/NAN/NAN in IE8Raphael.js 函数 getBBox 在 IE8 中返回 NAN/NAN/NAN
【发布时间】：2015-10-22 08:55:24
【问题描述】：

使用 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，示例 textBox.height 为 NaN。

我该如何解决这个问题？

【问题讨论】：

标签： javascript internet-explorer-8 raphael

【解决方案1】：

我从this answer to the question "Raphael JS and Text positioning" 找到了解决方法

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

_getBBox() 未记录，但由 Raphael 自己在内部使用，并且有效！

【讨论】：

这在 Raphael 2.2.0 中对我不起作用 - 在 IE8 中 path.getBBox() 对我来说返回 { height: NaN, width: NaN, x: NaN, x2: NaN, y: NaN, y2: NaN } 而 path._getBBox() 返回 {height: undefined, width: undefined, x: NaN, y: NaN}

【解决方案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 }

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

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

【讨论】：