0
使用raphael.js将图形渲染为画布,但问题是存在内存泄漏并且页面在一段时间后崩溃。有人能帮我解决这个问题吗?我正在使用underscore.js来处理循环,同时消除仍然没有运气。我试图将库更改为svg.js但问题更糟。在此先感谢,代码如下:使用raphael.js重新渲染时发生内存泄漏
var paper = new Raphael(document.getElementById('visualizerContainer'), 545, 545);
paper.canvas.style.backgroundColor = '#000';
Raphael.fn.line = function(startX, startY, endX, endY){
return this.path('M' + startX + ' ' + startY + ' L' + endX + ' ' + endY);
};
var flag=0;
window.particleObject={
"id":"",
"obj":[]
}
function addParticles(){
if(flag) removeParticles(particleObject);
for(var i=0;i<5000;i++){
var x=Math.floor((Math.random() * 628) + 1);
var y=Math.floor((Math.random() * 571) + 1);
var circleName = "var circle"+i;
circleName = paper.circle(x, y, 1);
//var fillColor='#'+ ('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6);
circleName.attr("fill", "#0F0");
circleName.attr("stroke", "#ff");
particleObject.id=i;
particleObject.obj.push(circleName);
}
flag=1;
}
function removeParticles(particleObject){
_.map(particleObject.obj, function(o) {o.remove(); });
}
$.getJSON('assets/data/jp_Wall.json', function(data) {
$.each(data.features, function(id, obj) {
var wall = paper.line(obj.x1, obj.y1, obj.x2, obj.y2).attr({stroke:'red',fill:'red',"stroke-width": 3});
});
});
$.getJSON('assets/data/jp_ImpossibleSpace.json', function(data) {
$.each(data.features, function(id, obj) {
var width=(obj.x2-obj.x1);
var height=(obj.y2-obj.y1);
var top_left_x=obj.x1;
var top_left_y=obj.y1;
var rectangle = paper.rect(top_left_x, top_left_y, width, height).attr({stroke:'blue',"stroke-width": 3, "stroke-dasharray": "."});
});
});
addParticles();
setInterval(addParticles, 500);
Wall.json - >https://jsonblob.com/54f47ff7e4b0ae1ed0b1fcf2
jp_ImpossibleSpace.json - >https://jsonblob.com/54f48114e4b0ae1ed0b1fd04
如果没有工作小提琴,很难跟踪。就我个人而言,我可能会略有不同。也许我会首先创建一个包含5000个隐藏粒子的数组,并将其固定。然后,当循环时,我会改变对象的x,y和可见性。由于您不是在时间间隔内创建/删除对象,它可能会有所帮助。 – Ian 2015-03-03 11:19:41
不能帮助改变流程,我读到即使那样也会发生同样的事情,有什么办法可以解决这个问题吗? – JDZ 2015-03-03 11:39:57
你从哪里读到同样的事情会发生?你不需要改变流程。不要每次都创建对象,改变它们的属性。 – Ian 2015-03-03 11:56:18