Question

我尝试以下列方式更改Raphaël路径元素（请将代码视为包含构建内容的完整示例）：

var n = 100,
    i = 0;
var values = [n];
var panel = document.createElement("div");
var paper = null;
var path = null;

panel.id = "panel";
panel.style.top = '0px';
panel.style.left = '0px';
panel.style.width = '300px';
panel.style.height = '300px';
panel.style.background = 'black';
document.getElementsByTagName('body')[0].appendChild(panel);

paper = Raphael(panel, 0, 0);

path = paper.path('m0,0');
path.attr({ stroke: '#fff', 'stroke-width': 1 });

function test () {
    i = n;

    while (i--)
        values[i] = Math.round(Math.random() * 3);

    // perform change here!
    path.attr({ path: 'm0,0l0,' + values.join('l3,') });

    // just a test case!
    setTimeout(test, 1);
};

test();

不幸的是，这种方法在内存中泄漏。我用Raphaël1.5.2和2.0测试版在FF 4和IE 7+中进行了测试。唯一的区别是Raphaël1.5.2泄漏速度比2.0 beta快得多。

我做错了什么？

更新

将此问题置于上下文中：我想用Raphaël实现“实时”图形控件。因此，我为每个系列使用一个数组缓冲区，并在达到缓冲区大小时渲染它们，所以我只需渲染一个给定的修复长度系列。

我在Raphaël中看到的唯一方法是每个系列的路径元素，如果需要，它会获取路径属性.attr({path: path.attr('path') + getSvgPath(buffer)})的更新，然后根据缓冲区大小{x>在x轴上进行转换{{ 1}} - 用于更新的平滑动画 - 最后在动画之后移动路径属性以防止不断扩展路径字符串：.animate({translation: (bufferSize*valuesDistance*-1) + ',0'}, 500, '<', callback)。

函数.attr({path: shiftSvgPath(path.attr('path'))})和shiftSvgPath()只返回相应的svg路径字符串。因此，结果始终由一个getSvgPath()命令和一个moveTo常量命令组成，或者等于显示值的数量或加上缓冲区大小。

Answer 1

我最近遇到了类似的问题。我不会把它称为泄漏，而是拉伸路径时Raphael的大量内存消耗。我只是猜测它在内部使用了一些占用大量内存的缓存数组。

我的做法是抛弃拉斐尔并使用简单的旧javascript绘制svg元素。

改变Raphaël路径元素的正确方法是什么

更新

1 个答案: