Javascript和细分，在for循环中崩溃浏览器

Javascript and subdivision, crashing browser in for loop

本文关键字：循环 崩溃 浏览器 for 细分 Javascript      更新时间：2023-09-26

我正在使用paper.js制作一些生成视觉效果，计划是定义一个随机形状，对其进行细分，然后将这些点随机化(以不同的程度)。现在，当尝试细分多边形时，浏览器崩溃了。

我对在Javascript中做这些事情相对较新，所以也许我对它的期望太高了，显然在密集的for循环中崩溃只是发生的事情。有人有什么建议吗?

var Cloud = function(point) {
    this.origin = point;
    this.initBound = new Size(600,200); 
    this.RoM = 40;
    var numsides = 6;
    var scalingFactor = new Point(1,this.initBound.height/this.initBound.width);
    var cloud = new Path.RegularPolygon({
        center: this.origin,
        sides: numsides,
        radius: this.initBound.width/2,
        strokeColor: 'black'
    });
    cloud.scaling = scalingFactor;
    var initBoundBox = new Path.Rectangle({
        point: new Point(point.x-this.initBound.width/2,point.y-this.initBound.height/2),
        size: this.initBound,
        strokeColor: 'red'
    });
    for(var i=0;i<numsides;i++){
        var px = cloud.segments[i].point.x;
        var py = cloud.segments[i].point.y;
        var x = Math.floor(Math.random()*( (px+this.RoM)-(px-this.RoM)+1 ) + (px-this.RoM) );
        var y = Math.floor(Math.random()*( (py+this.RoM)-(py-this.RoM)+1 ) + (py-this.RoM) );
        var tmpP = new Point(x,y);
        cloud.segments[i].point = tmpP;
    }
    for(var i=0;i<cloud.segments.length-1;i++){
        var mdPnt = new Point((cloud.segments[i].point.x+cloud.segments[i+1].point.x)/2,(cloud.segments[i].point.y+cloud.segments[i+1].point.y)/2); 
        cloud.add(i,mdPnt); //breaking here
    }   
    //cloud.smooth();
}
new Cloud(new Point(500,300));

在最后一个for循环中，您在每次迭代中添加一个片段，从而使cloud.segments.length增加1。你的循环永远不会结束。你可以通过增加2而不是1来缓解这个问题，或者找到一个更好的平分例程。

简而言之，试着这样做:

for(var i=0;i<cloud.segments.length-1;i+=2){
    var mdPnt = new Point((cloud.segments[i].point.x+cloud.segments[i+1].point.x)/2,(cloud.segments[i].point.y+cloud.segments[i+1].point.y)/2); 
    cloud.add(i,mdPnt); //breaking here
}
相关文章：