Как правильно изменить элементы пути Рафаэля? - PullRequest
Новая
       4

Как правильно изменить элементы пути Рафаэля?

1 голос
/ 07 августа 2011

Я пытаюсь существенно изменить элементы пути 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();

К сожалению, такой подход просачивается в память. Я тестировал его в FF 4 и IE 7+ с Raphaël 1.5.2 и 2.0 beta. Разница лишь в том, что Raphaël 1.5.2 протекает намного быстрее, чем 2.0 beta.

Что я делаю не так?

Обновление

Чтобы поставить этот вопрос в контекст: я хочу реализовать графическое управление в реальном времени с Raphaël. Поэтому я использую буфер массива для каждой серии и отображаю их при достижении размера буфера, поэтому мне нужно только визуализировать данную серию фиксированной длины.

Единственный способ, которым я видел это в Raphaël - это элемент пути на серию, который обновляет свой атрибут пути .attr({path: path.attr('path') + getSvgPath(buffer)}), если необходимо, с последующим переводом по оси x в зависимости от размера буфера .animate({translation: (bufferSize*valuesDistance*-1) + ',0'}, 500, '<', callback) - для плавной анимации обновлений - и, наконец, сдвиг атрибута пути после анимации для предотвращения расширения строк пути: .attr({path: shiftSvgPath(path.attr('path'))}).

Функции shiftSvgPath() и getSvgPath() просто возвращают соответствующую строку пути svg. Таким образом, результат всегда состоит из одной команды moveTo в начале и постоянного числа команд lineTo, равных количеству отображаемых значений или плюс размер буфера.

1 Ответ

1 голос
/ 22 декабря 2011

Я столкнулся с подобной проблемой в последнее время.Я бы не назвал это утечкой, а скорее огромным потреблением памяти у Рафаэля при рисовании путей.Я просто предполагаю, что он использует некоторые внутренние кэширующие массивы, которые поглощают много памяти.

Мой подход состоял в том, чтобы бросить Рафаэля и нарисовать элементы SVG с помощью простого старого JavaScript.

...